WebM video embed not playing on iPhone

[mike217]

Hi, I am attempting to embed a .webm video into my blog post that autoplays without video controls and loops. It works great on desktop, but doesn't show up on mobile.

I've seen other see success by adding both .webm and .mp4 extensions to their snippets, but I can't get it to show anything if I include the .webm bit first, and I can't get it to autoplay if I use the .mp4 bit first.

<video width="320" muted="muted" poster="" autoplay="autoplay" loop="loop"><source src="xxx.webm" type="video/webm"><source src="xxx.mp4" type="video/mp4"></source></video>

Any ideas how to get autoplay/loop to work in .webm format on mobile? Do I need to add some specific video player css for mobile devices? Of note, autoplay works (when using the mp4 snippet first) on tablet.

[Wahab_Ahmad]

Dear @mike217,

 Many mobile browsers have restrictions in place to prevent auto-playing videos. You can use JavaScript to handle the autoplay and loop functionality.

<video id="myVideo" width="320" muted="muted" poster="" loop="loop">
  <source src="xxx.webm" type="video/webm">
  <source src="xxx.mp4" type="video/mp4">
</video>

<script>
  var video = document.getElementById('myVideo');
  video.autoplay = true;
  video.load();
</script>

[mike217]

Hi Wahab, can you confirm that the javascript should go immediately after the video snippet in the HTML of the blog post, as presented above? I've specified a video id and the file extensions for WebM and MP4, but this still doesn't autoplay on iPhone. I am wondering if the js should go into a theme file or something.

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

You can try this code

<video width="320" muted="muted" poster="" autoplay="autoplay" loop="loop">
  <source src="xxx.webm" type="video/webm">
  <source src="xxx.mp4" type="video/mp4">
</video>

Hope you find my answer helpful!

Best regards,

Richard | PageFly

[mike217]

I tried this, but unfortunately it did not work.

[PageFly-Richard]

I have checked and this code is properly structured, please try to check your video URL is correct, if everything is correct then you should contact the theme to get the necessary support