Why is my .webm video not playing on iPhone?

mike217
Tourist
4 0 0

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.

Replies 6 (6)

Wahab_Ahmad
Shopify Partner
773 114 203

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>

 

 

 
 
 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
mike217
Tourist
4 0 0

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
Shopify Partner
4338 987 1643

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

mike217
Tourist
4 0 0

I tried this, but unfortunately it did not work.

PageFly-Richard
Shopify Partner
4338 987 1643

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Andrew3296
Visitor
3 0 0

Where would you put this code?