Hidden Background Video Element Appears as Full Screen on WebKit (iPhone) Browsers

[FullBlast]

Hello!

We’ve discovered an issue within a background video element, in which a particular video background appears as full screen on any WebKit based browsers on an iPhone - even though it’s been hidden by both Pro breakpoints, as well as a CSS media query. The issue appears here, on seemingly any recent iPhone:

Calgary Web Design and Marketing

Any insights on how to best prevent this from occurring would be much appreciated!

[christian]

Hey @FullBlast,

I checked your site using an iPhone and Chrome and Safari browsers and I don’t see a full screen video background. Would you mind providing the following details

• Version number of the iOS, Safari and Chrome
• Screenshot of the issue.

Thanks.

[FullBlast]

Hey @christian,

Thank you for having a look! It’s occurring on our end every time the page loads, and after the user scrolls down slightly. After a few seconds, the hidden video element appears full screen, as seen below:

The device I’m testing on is an iPhone 13 Pro, running iOS 15.4.1. We have also been able to replicate the issue on an iPhone 12 Pro as well. We’ve tested in Safari, Chrome and Firefox for iOS.

Android devices do not appear to be affected - at least our Android 12 testing device is not affected.

Thanks again for your help!

[christian]

Hey @FullBlast,

Thanks for the screenshot. I see the issue on your site now but I couldn’t replicate it on my site. With that said, there might be something on your site that is causing the issue. We need to rule everything out before we can investigate further. Please do the following troubleshooting steps that’s based on what I currently see on your site.

1. Testing For Plugin Conflict
2. Child Theme
3. Css/Js Customization

Please get back to us with the result of each step and also provide the following info in a Secure Note so we can save a template of your page and test it on our sites.

• WordPress Login URL
• Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[FullBlast]

Hey @christian,

Thanks for the list! After some further troubleshooting, we’ve found the root cause - we run WP Rocket on the site for speed optimizations, and discovered that deferring JavaScript loading on the page was the culprit. We’ve created an exception for the video, and we can no longer reproduce the problem.

Thanks again for your time!

[ruenel]

You are most welcome, @FullBlast.