Embedded video not playing/showing on mobile devices

Design help Custom code
12

Hey,

Just wanted to say thanks for posting this. Fixed a problem I’ve been having with autoplay not working for a while. For everyone else, this is the code I used based on what Klaver posted above:

for HTML Embeds:

<div class="YOUR_CLASS_wrapper">
    
            <video class="YOUR_CLASS" playsinline autoplay muted loop preload="yes" width="100%">
                <source src="YOUR VIDEO LINK" type="video/mp4">
            </video>
       
</div>

for the page body tag:

<script>
// Code to capture all videos on the page
const videos = document.querySelectorAll(" .YOUR_CLASS_wrapper .YOUR_CLASS");

//Code to force autoplay on all devices
for (const video of videos) {
     video.setAttribute("playsinline", "");
     video.setAttribute("muted", "");
     video.play();
}
</script>

If you’re still having trouble with the video appearing after that:

  1. Make sure your hosted video file link ends with .mp4 (or whatever file extension it is – and if it is different make sure that the type=“video/mp4” reflects that).
  2. Make sure that the video file size is small enough (this is often the issue)