Video Banner

Store Design
, ,
1

Hey everyone, is it possible to add a video banner with autoplay to my Shopify store? If so, how can I do it?

2

Hey @Wanigajameson
Here there is auto play video section for the banner. In this section you can add YouTube embed video URL.

.video-banner-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  background: #000;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-banner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}


  

    <iframe id="video-banner" src="{{ section.settings.video_url | replace: 'watch?v=', 'embed/' }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
    </iframe>
  

{% schema %}
{
  "name": "Video Banner",
  "settings": [
    {
      "type": "text",
      "id": "video_url",
      "label": "Video URL",
      "default": "https://www.youtube.com/embed/dQw4w9WgXcQ"
    },
    {
      "type": "checkbox",
      "id": "mute_video",
      "label": "Mute Video",
      "default": true
    }
  ]
}
{% endschema %}
3

Hi @Wanigajameson , kindly check out the below given video.

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

Hi @Wanigajameson ,

You can follow the instructions below, it will display fine