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=""

Copy Code

<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

Copy 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:

Copy Code

,
     {
      "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."
    }

If you’re new to Shopify, our Shopify Beginner Tutorial is the perfect step-by-step guide to help you set up your store with ease. Covering everything from product listings to payment setups, this comprehensive guide ensures you get your store up and running smoothly in 2024. Avoid mistakes and kickstart your Shopify journey today!