Implementing autoplay videos on your Shopify homepage can be a game-changer for engaging customers as soon as they land on your site. This feature grabs attention immediately, providing a dynamic and visually appealing introduction to your store.

Benefits of Autoplay Videos

Implementing autoplay videos offers several advantages:

• Increased Engagement: Videos capture attention more effectively than static images or text, keeping visitors on your site longer.

• Enhanced User Experience: Provides a seamless and interactive experience, making your site feel more lively and modern.

• Better Storytelling: Allows you to showcase your products or brand story in a compelling way, helping to build a stronger connection with your audience.

• Boosted Conversions: Engaging video content can lead to higher conversion rates as customers are more likely to make a purchase after watching a video.

Steps to Implement

Before making any code modifications, always ensure you create a copy of the theme first. Test all your changes on this copy to confirm everything works perfectly before publishing it to the live theme. This precaution helps prevent any issues from affecting your main theme and keeps your work safe.

After uploading the video to Shopify, there are two options to achieve video autoplay feature.

First Option: Add Custom Liquid Code

If you’re using the Dawn theme version 13.0.0 or newer, follow these steps to add a custom liquid section for autoplay and loop features:

1. Customize Your Theme: Click on “Customize” for your theme.

2. Add a Section: In the customization panel, click on “Add section” and choose “Custom liquid.”

3. Insert Custom Liquid Code: Paste the provided custom liquid code into the editor.

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

Second Option: Auto Play Self-Hosted Video with Loop in Shopify

Create a new section named autoplay-video.liquid and paste the code. This will create a new section where you can select a video from your Shopify library.

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

If you wish to play a video hosted on YouTube or Vimeo, add the code below next to row 126 of above schema, then you’ll be able to paste a YouTube/Vimeo video link in the new section.

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