Video Banner

[Wanigajameson]

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

[anupam1607 · Accepted solution]

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;
}

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

{% 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 %}

[anupam1607 · Accepted solution]

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;
}

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

{% 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 %}

[topnewyork · Accepted solution]

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!

[namphan]

Hi @Wanigajameson,

You can follow the instructions below, it will display fine