Video player works in backend but not frontend

[markusp80]

My goal:
I want to add a video player inside a rounded “box”. I want the mp4-file to autoplay and loop, no controls. Just as an aesthetic element mixed with images. I work a lot in Premiere so I can adjust and adapt the video file size, ratio etc to whatever it needs to be to fit in on the page.

My issues:
Mp4 file is uploaded in Media Library. The video plays as intended in backend but not on the live web page. I have tried it on Mac and PC Chrome+Safari, iPhone 15 Pro Safari. It does not autoplay on either desktop or mobile. On desktop it plays and loops if I click it, but not autoplay.

On mobile (iPhone 15 Pro, Safari, iOS 17) something strange happens. It opens the video in fullscren in Safari.

I started with the Themeco template “Better Faster Stronger” for this page, and modified it a bit.

So all the ratio settings, everything under the Primary-tab, Frame-tab etc. works just fine in backend. But on the live web page there seems to be lots of glitches. I’m thinking that this MIGHT have something to do with the way this template was created(?). It has looper provider and looper consumer, which I don’t really understand or work with. Don’t know when or why to use a Figure as well to be honest. The video player is inside a Figure. I just loaded the template and made some adjustments.

Help appreciated! Check out the page and see my goal at the top of this post. Suggestions on how to achieve this is welcome.

Check it here: https://cheatcode.se/test/

[marc_a]

Hey @markusp80,

Thanks for reaching out!

If you want to autoplay the video when the page is loaded, you need to enable the Muted option from the video element.

You may also check this article for more information: https://developer.chrome.com/blog/autoplay/

Hope that helps.

[markusp80]

Thanks! Works just as intended on Mac and PC, Chrome and Safari.

But on iPhone 15 in Safari and Chrome it does not autoplay at all. Only way to get it to play is by clicking it, and then it plays in fullscreen. Do you know if there is a way around this, so that it behaves the same as on desktop? Thanks.

[tristup]

Hi @markusp80,

It requires a playsinline attribute in the video tag, which is included in one of our upcoming updates. Please keep an eye on our theme updates.

Thanks

[markusp80]

Awesome! I always keep X and Pro updated on my sites so I will keep my eyes open for this feature. Thanks

[markusp80]

Btw, I noticed one more thing. I have now put two videos on the same page. But only the lower one autoplays. The top one is just black. If I click the top one, it plays, but then the lower one stops.

Is it only possible to have one video autoplaying at the time?

https://cheatcode.se/test/

[tristup]

Hi @markusp80,

You can multiple videos and set the Autoplay to those. There might be some different reason behind your problem, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[markusp80]

See secure note in this message with login credentials.

[marc_a]

Hey @markusp80,

It’s my understanding that most web browsers will only allow one autoplay video per page. Even though these are silent videos, other videos would likely have sound so you could have multiple soundtracks running on the same page with only one video in view.

Since those videos are so short, I would suggest converting them to animated GIFs. They would autoplay and loop for you. That would seem to be a good option to get around the browser limitations.

Hope that helps.

[markusp80]

Ok, thanks. Animated GIFs with 256 colors are not really ideal for video, or file size, but thanks for your input. Maybe I will just have to settle for one mp4 video per page.

[ruenel]

Always a pleasure, @markusp80.