Why is my .webm video not playing on iPhone?

Technical Q&A
, ,
1

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.

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.

2

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.
3

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

You can try this code

Hope you find my answer helpful!

Best regards,

Richard | PageFly

4

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.

5

I tried this, but unfortunately it did not work.

6

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

7

Where would you put this code?