Making Videos Auto Play and Hide Video Controls

[kyecoolkidz]

Hi,

I am wanting to make my product video autoplay and also hide/disable the video controls. I am using the Showcase theme. Please see link to page I am referring to.

https://miamily.com.au/collections/carry-on/products/miamily-carry-on-forest-green

I am also creating a feature section on this product page (in progress) and I am adding video blocks which I will also need to hide the video controls. (these already autoplay)

[Guleria]

Hello @kyecoolkidz ,

Edit theme.liquid search for </body>

Just before to it add this code

<script>
document.addEventListener("DOMContentLoaded", function () {
  // Select all elements with the class 'media-video'
  const mediaVideos = document.querySelectorAll(".media-video");

  // Loop through and trigger click on each element
  mediaVideos.forEach(function (video) {
    video.click();
  });
});

</script>

Regards
Guleria

[kyecoolkidz]

Hi, thanks for your reply.

However that code didn't seem to change anything....

Any other solutions?

[Guleria]

I don't find the code I provided in the source code ?

Another solution find the video tag in the editor and  pas tis attribute autoplay
like this:
https://www.w3schools.com/tags/att_video_autoplay.asp

[kyecoolkidz]

Hi,

Please check source code again. I removed it because there was no change, but have added it again.

Please let me know if I have missed anything.

[Guleria]

Replace it with this one

<script>
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function(){
  // Select all elements with the class 'media-video'
  const mediaVideos = document.querySelectorAll(".media-video");

  // Loop through and trigger click on each element
  mediaVideos.forEach(function (video) {
    video.click();
  });
}, 1000);
});

</script>

If still doesn't work then you need to find the code and add the attribute. 
or ask a developer to do it. 

[rajweb]

Hey @kyecoolkidz ,

To make your video autoplay and hide the controls using the provided code, you can update it as follows:

<div class="plyr__video-wrapper">
  <video 
    playsinline 
    autoplay 
    muted 
    loop 
    class="media-video" 
    preload="metadata" 
    aria-label="MiaMily Carry On - Forest Green" 
    poster="//miamily.com.au/cdn/shop/files/preview_images/02-OC-FG-Angle_540x.png-2_4389b90c-c59b-4f06-8ceb-0d06472a84b8_360x360.webp?v=1734312365">
    <source 
      src="//miamily.com.au/cdn/shop/videos/c/vp/c0c77d8841ee4f798e27b6a876c0b626/c0c77d8841ee4f798e27b6a876c0b626.HD-1080p-2.5Mbps-39733929.mp4?v=0" 
      type="video/mp4">
    <img 
      src="//miamily.com.au/cdn/shop/files/preview_images/02-OC-FG-Angle_540x.png-2_4389b90c-c59b-4f06-8ceb-0d06472a84b8_360x360.webp?v=1734312365">
  </video>
  <div 
    class="plyr__poster" 
    style="background-image: url('//miamily.com.au/cdn/shop/files/preview_images/02-OC-FG-Angle_540x.png-2_4389b90c-c59b-4f06-8ceb-0d06472a84b8_360x360.webp?v=1734312365');">
  </div>
</div>

Changes Made:

1. autoplay Attribute

- Added autoplay to make the video start automatically.

2. muted Attribute:

- Added muted to ensure the video plays without sound (this is required for autoplay in most browsers).

3. Removed controls Attribute:

-Since there is no controls attribute in your original code, no need to explicitly remove it. The absence of this attribute ensures the controls are hidden.    4. loop Attribute:

-Ensures the video repeats continuously.

After updating the code:

- Save the changes in your theme file.

- Open your browser, clear the cache, and test the product page to ensure the video autoplay works without controls.

- Confirm that the video loops continuously and starts muted.

If any issues persist, let me know!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[rajweb]

@kyecoolkidz ,

Go to Online Store > Themes > Actions > Edit Code.

Find the product-template.liquid (or the relevant template that contains your video) file under Sections or Templates.

Add the script just before the </body> tag in the file. It could look like this:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.querySelector('video');
        const poster = document.querySelector('.plyr__poster');

        // Function to play video
        function playVideo() {
            video.play().then(() => {
                poster.style.opacity = '0';
            }).catch(error => {
                console.log("Auto-play was prevented. User interaction required.");
            });
        }

        // Attempt to play the video immediately
        playVideo();

        // Add click event listener to play video on user interaction
        video.addEventListener('click', playVideo);

        // Show poster when video is paused
        video.addEventListener('pause', () => {
            poster.style.opacity = '1';
        });

        // Hide poster when video is playing
        video.addEventListener('play', () => {
            poster.style.opacity = '0';
        });
    });
</script>

Thanks