Embedded Videos open up and start playing automatically on iOS mobile

Hello everybody,

I am currently debugging our company website and we have the following problem:

On the homepage we have a section that displays some of our client projects. There we placed videos with the playsinline attribute. Those can then be played by the visitor. So far so good. The problem is that for many iPhone users (not occured on android yet) the video opens up in a lightbox and starts playing right on pageload, when they still havent reached that section yet.

Shouldnt the playsinline prevent even the video lightbox from happening? Also I attached a click eventlistener to the videos, so they should normally only play when the user clicks on the thumbnail.

Im completly clueless in why this is happing and would appreciate any tip or help to lead me to a solution!

The site is https://www.yumeda.de/


Here is my site Read-Only:

preview

The playsinline attribute should indeed prevent autoplay in lightboxes, but iOS has specific behaviors regarding video playback. The issue might be related to the autoplay policies of iOS browsers, which have been updated to prevent unwanted video playback.

What you could try to do is ensure your video element includes the autoplay, muted, and playsinline attributes. If you require sound, consider adding an unmute button beside the video. When clicked, this button can unmute the video via JavaScript.

Here’s an article that dives deeper into this issue. I think it might be helpful. Good luck!

Thanks for you reply!

I’ve tried to ensure these attributes in the video element but it still plays automatically on lightbox on iOS…
Weirdly enough we have a different project that has a video with the same functionality which works fine for iOS as well (Which is why I think the iOS policies shouldnt be a problem). That video was embedded as an iframe so I tried it this way too, but also with no success.

Right now I think it might be another script maybe thats producing this bug