Play button doesn't work on background video for low power mode on iOS devices

[dmout (Danny)]

following up on this thread I made a few months ago: Play Button Not Working on Background Video in Low Power Mode - #4 by mikeyevin

When an iOS device is in low-power mode, it will not allow videos in Safari to autoplay without the user’s input. This impacts background videos, and Safari displays the play button icon.

the bug is that tapping the button does nothing, the video won’t play. I’ve resorted to using js code to detect the tap and then play the video.

this misunderstanding in the last thread is that the play button might be there as an indicator that there is a video, even if it’s not playable, but this is not the case. a round play button always indicates a playable video, and iOS has a different icon for when a video cannot be played.

[mikeyevin]

I can’t really speak for exactly how iOS handles low power states, however everything I looked at mentions that this is intended behavior as the OS is attempting to save as much battery as possible. This means that while there is a “play” icon over the video, the intention is probably not to allow users to click it but instead inform that there would be a video playing in that spot in normal circumstances.

I don’t use an iPhone so I’m not too familiar with the experience, however I’d imagine this is the case for any background video on the platform when the device is in “low power mode” and fully intended by Apple—rather than something Webflow does on their end.

I’m glad you were able to find a solution, it seems like a frustrating situation when your site relies on background video, but thankfully most users aren’t browsing regularly in low power mode (or at least, I’d hope they aren’t unless it’s required)—and if they are, they’re experiencing a limited experience all around.

[dmout (Danny)]

this is intended behavior as the OS is attempting to save as much battery as possible. This means that while there is a “play” icon over the video, the intention is probably not to allow users to click it but instead inform that there would be a video playing in that spot in normal circumstances.

Autoplay being disabled is intended system behaviour, but the play button always indicates that the user can tap to play instead. Low power mode doesn’t disable video playback in Safari, it disables videos that try to autoplay without the user themselves doing it.

If you insert an HTML Embed block and add a HTML5 video with autoplay, again the system will stop it autoplaying in low power mode, but the play button does work to manually play the video.

In the Stackoverflow thread you referenced the first time, the poster mentioned that they set a z-index of 0, which is why the play button didn’t work in their case.

So this does seem to be an bug with how the background video block is implemented in Webflow.

[mikeyevin]

I don’t think it’s a bug as much as it’s a difference in how Webflow structures the Background Video element itself—however if you can get around that by utilizing the HTML Embed then I’d recommend going that route. It’s possible there may be a solution with the native Background Video element with adjustments to the z-index (either with the native Designer styles or with a bit of custom code) but that’s more about ensuring the element that needs to be clicked is at a position on the canvas that it can be clicked.

As I mentioned I don’t use iOS so I had no idea there was an action the user could take on the background video (my apologies), but with adjustment to the native Webflow element I’m sure you could get it working as expected without using an alternative solution.