Background videos are not working on Safari and i phone, but it works fine on Firefox?

Hallo, i am new to webflow and i have a portfolio website with links to other pages, everytime i click on a link and then go back to my site, all my background videos are frozen, but i dont have the problem on Firefox, its only on safari and ios?

What i am doing wrong?

Here is my site, but i changed all the links to simple text with the url, because of this problem.

https://preview.webflow.com/preview/christian-bohmisch-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=christian-bohmisch-portfolio&preview=cd1d5c2f7eee0807458e2a8a83e61d59&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Ok, i just saw, that you can open every link in separate tab, that solved it for me.

Just incase, I add this script before the tag for all sites as I sometimes find BG videos won’t work on iPhone:

<!-- START: Mobile Autoplay Video -->
<script>
var mobilevideo = document.getElementsByTagName("video")[0];
mobilevideo.setAttribute("playsinline", "");
mobilevideo.setAttribute("muted", "");
</script>
<!-- END: Mobile Autoplay Video -->
1 Like

thx i will try it soon, but at the moment i work on a different project, maybe you can help me out here.

i have a site with a grid, the grid- columns are set to auto, but in the preview its not working, the columns do not expand and cut off the content inside?

https://preview.webflow.com/preview/andale-mobile-massage?utm_medium=preview_link&utm_source=designer&utm_content=andale-mobile-massage&preview=67e4e71caf7f79e2f25f533a0219d97c&mode=preview

Go to iPhone Settings → Safari → Advanced → Experimental Features → scroll down and find the HDR Media Capabilities and Media Capabilities Extensions options, turn them off, then turn on again.

This is probably the only solution working on internet: https://thedevengine.com/posts/resolved-background-video-issues-on-safari

The reason background videos don’t work in Safari is that they need to be defined as background images. However, in Chrome and Firefox, you’ll need a video element. To make it work on all browsers, you will need to use a combination of a background image and a video element with absolute positioning.

i have the same issue please also tell me and also I found these websites check these and tell me if this can help you out!!!

I have same issue when I visit my website in Firefox browser anyone can help me?

Safari tends to be more stringent with video codec support, and it’s possible that the video format used is not compatible with Safari or iPhone. Ensure that the video is encoded in a format that is widely supported across browsers, such as H.264.

Additionally, Safari on iOS devices has specific requirements and limitations regarding autoplaying videos. Apple imposes restrictions to conserve bandwidth and enhance user experience. Make sure your video complies with Apple’s autoplay policies, and consider providing a user-triggered action to initiate video playback.

If background videos are not working on Safari and iPhone but are working fine on Firefox, it could be due to various reasons including browser compatibility issues, video format support, or settings configurations.

Background videos do not play on Safari and iPhone, but they function properly on Firefox. Check this link to learn more.