How To Add Video On Shopify Homepage With Autoplay

Today, we’re diving into a highly requested topic: adding autoplay and loop features to Shopify videos. By default, Shopify’s built-in video section lacks autoplay functionality. This means that when you add a video using the Shopify video section, viewers have to manually click the play button. But fear not, because we’ve got a solution for you! In this tutorial, we’ll explore two methods to add autoplay and loop features to your Shopify videos.

First Option: Add Custom Liquid Code

• If you’re using the Dawn theme version 13.0.0 or newer, you’ll need to add a custom liquid section to enable autoplay and loop features.
• Click on “Customize” for your theme.
• In the customization panel, click on “Add section” and choose “Custom liquid.”
• Paste the provided custom liquid code into the editor.

Add the following code in Custom Liquid section and replace the src=""

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
    <source src="/media/cc0-videos/websensepro.mp4"
                  type="video/mp4">
    <source src="/media/cc0-videos/websensepro.mp4"
                  type="video/mp4">
</video>

Second Option: Auto Play Self Hosted With Loop in Shopify

Create a new section named autoplay-video.liquid and paste the following code

<div 
  class="page-width"
  {% if section.settings.fullwidth %}
    style="max-width: 100%!important;margin: 0;padding:0px"
  {% endif %}
>
  <div class="video-section">
    <h2>{{ section.settings.heading }}</h2>
  </div>
  {% if section.settings.video_url.type == 'youtube' %}
    <div
      class="video-container"
      {% if section.settings.fullwidth %}
        style="width: 100%;"
      {% endif %}
    >
      <iframe
        src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}{% if section.settings.autoplay %}?autoplay=1&mute=1{% endif %}{% if section.settings.controller == false %}&controls=0{% endif %}&modestbranding=1"
        class="youtube"
        width="100%"
        height="600px"
      ></iframe>
    </div>
  {% elsif section.settings.video_url.type == 'vimeo' %}
    <div class="video-container">
      <video
        src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}{% if section.settings.autoplay %}?autoplay=1&mute=1{% endif %}"
        class="vimeo"
        {% if section.settings.fullwidth %}
          style="width: 100%;"
        {% endif %}
      ></video>
    </div>
  {% elsif section.settings.self_hosted_video %}
    <div
      class="video-container"
      {% if section.settings.fullwidth %}
        style="width: 100%;"
      {% endif %}
    >
      {{
        section.settings.self_hosted_video
        | video_tag:
          controls: section.settings.controller,
          autoplay: section.settings.autoplay,
          loop: true,
          width: '100%'
      }}
    </div>
  {% endif %}
</div>

{% if section.settings.fullwidth %}
  <style>
    /* Your full-height styles go here */
    .video-container {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* Adjust this value as needed for the aspect ratio */
      height: 0;
      overflow: hidden;
    }
    .video-container iframe,
    .video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
{% endif %}

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var videos = document.querySelectorAll('.youtube, .vimeo');
    function playPauseVideos() {
      videos.forEach(function (video) {
        if (section.settings.autoplay) {
          video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        } else {
          video.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
      });
    }
    // Initial play/pause based on the 'Autoplay video' setting
    playPauseVideos();
    // Listen for changes in the 'Autoplay video' setting and play/pause accordingly
    document.getElementById('section_autoplay').addEventListener('change', function () {
      section.settings.autoplay = this.checked;
      playPauseVideos();
    });
  });
</script>
{% schema %}
{
  "name": "Video WebSensePro",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Video section heading",
      "default": "Video Autoplay"
    },
    {
      "type": "checkbox",
      "id": "fullwidth",
      "label": "Make Full Width"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Autoplay video",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "controller",
      "label": "Enable Controls",
      "default": false
    },
    {
      "type": "video",
      "id": "self_hosted_video",
      "label":"Select Video"
    }
  ],
  "presets": [
    {
      "name": "Video WebSensePro"
    }
  ]
}
{% endschema %}

Additional Schema For YouTube and Vimeo Video

Add the following schema in section which is created above to add options for YouTube and Vimeo:

,
     {
      "type": "video_url",
      "id": "video_url",
      "accept": ["youtube", "vimeo"],
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "label": "URL",
      "info": "Video plays on the page."
    }