auto play video on home page on all devices

[HRoss82]

Hello,

I am looking for some help in trying to get a video to automatically play on the home page on all devices.

So far I have added the code below

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/1c7e32e067a04b3a9fbcdf125e02e278.mp4"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/1c7e32e067a04b3a9fbcdf125e02e278.mp4"
type="video/mp4">
</video>

to a Custom Liquid Section at the top of the page where I want it to be.

On the desktop it seems to play automatically when the page is opened.

However the video does not have a view on the mobile version and just shows a play button that when clicked plays the vide.

I would like to get the video to play automatically on  mobile and tablet modes. 

I am currently using the craft theme

In advance - I do not want to upload my video to YouTube as I want to keep it on my site.

Has anyone done this or can anyone help and suggest what I should do to get this to work please?

Many thanks in advance

[StudioEnchant]

Hey @HRoss82,

you will need to combine HTML and JS to accomplish the desired result.

The HTML code would be:

<video muted playsinline loop poster="path-to-your-poster-image.jpg">
  <source src="https://cdn.shopify.com/videos/c/o/v/1c7e32e067a04b3a9fbcdf125e02e278.mp4" type="video/mp4">
</video>

and the JS code would be:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var video = document.querySelector("video");

  if (video) {
    // Check if the device is mobile or tablet
    if (/Mobi|Tablet/i.test(navigator.userAgent)) {
      // Start playing the video
      video.play();
    }
  }
});
</script>

Hope we helped, if you have any further questions don't hesitate to reply.

[HRoss82]

Hi StudioEnchant,

Thanks for your help

Would you add the HTML and JS in the custom CSS box with the rest of the code I have added or is there another page where I should add it and if so where?

Many thanks

[StudioEnchant · Accepted solution]

Just use this code:

<style>
  video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
</style>

<video muted playsinline loop poster="path-to-your-poster-image.jpg">
  <source src="https://cdn.shopify.com/videos/c/o/v/1c7e32e067a04b3a9fbcdf125e02e278.mp4" type="video/mp4">
</video>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var video = document.querySelector("video");

    if (video) {
      // Check if the device is mobile or tablet
      if (/Mobi|Tablet/i.test(navigator.userAgent)) {
        // Start playing the video
        video.play();
      }
    }
  });
</script>

Make sure to replace "path-to-your-poster-image.jpg" with the actual path to your poster image. Insert this code into your theme where you want the video to appear, and it should automatically play on mobile and tablet devices while showing the poster image when it doesn't autoplay somehow.

[HRoss82]

I have now added the code as you sent it above with the link to the video and changed the path of the poster image.

<style> video { width: 100%; height: auto; display: block; margin: 0 auto; } </style> <video muted playsinline loop poster="https://cdn.shopify.com/s/files/1/0739/8041/2192/files/ColourWave_Glass_-_Group_Shot_Header_Image.jp..."> <source src="https://cdn.shopify.com/videos/c/o/v/8bda67156ced44e7a8a7f82d2abf0d18.mp4"

type="video/mp4"> </video> <script> document.addEventListener("DOMContentLoaded", function() { var video = document.querySelector("video"); if (video) { // Check if the device is mobile or tablet if (/Mobi|Tablet/i.test(navigator.userAgent)) { // Start playing the video video.play(); } } }); </script>

However I am just left with a staitc image on the desktop view - I haven't checked mobile or tablet view yet.

Any suggestions as to where this might not be working properly?

Many thanks

[HRoss82]

I pasted the code in the custom liquid section on my page, assuming that was where it should go?  Unless any otheer thoughts?