Cover Block: Video background autoplays on desktop but not on mobile (on Simple sites)

[vajrasar]

Quick summary

When using a video as the media on the Cover Block of a Simple site, the video autoplays when the page or post is opened on a desktop browser. However, the same video remains paused when the page or post is opened on a mobile browser.

On an Atomic site, the same block shows the video autoplaying on both desktop and mobile browsers.

Steps to reproduce

1. Create a new page or post on a public Simple site
2. Add a Cover block
3. Add Media → add a Video background to the cover block
4. Save the changes, publish the post/page
5. Check the post/page on the site

What you expected to happen

The video should autoplay on both desktop and mobile browsers or remain paused on both.

What actually happened

The video will autoplay on desktop browsers but will remain paused on mobile browsers.

Impact

Most (> 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple. Atomic appears to be working fine.

Logs or notes

If the site is not public then wordpress-mobile/gutenberg-mobile#6678 is more likely to be relevant.

[happychait]

I had a user report it in 8507343-zen

[jartes]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated.
• Tested on Atomic – Confirmed it works as expected.

📌 FINDINGS/SCREENSHOTS/VIDEO

• Tested this with other sites, and I'm able to replicate it on Simple, but not on Atomic.

📌 ACTIONS

• Triaged
• Added normal priority

[happychait]

Another user reported in #8524357-zen for their Simple site.

[cselamor]

8523495-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8507343-zen
• 8524357-zen
• 8523495-zen
• 8482133-zen
• 8570000-zen
• 8579784-zen
• 8708509-zen
• 8807056-zen
• 8833868-zen

[cselamor]

8482133-zen

[cselamor]

8570000-zen

[Robertght]

8579784-zen. The user stated it was a problem in the past, it got fixed and now it's back again.

[Robertght]

@Automattic/dotcom-product-ambassadors, can this be looked into by the team and prioritize it for a quick fix?

[mrfoxtalbot]

Thank you @Robertght for the ping.

Perhaps @Automattic/lego could take a look to help narrow down the issue?

[miksansegundo]

I can have a look at this later. Meanwhile, here are some thoughts:

• Video autoplay has become harder because browsers protect users from those video ads that play automatically and also to prevent data consumption on mobile
• Videos without audio or muted are usually allowed to autoplay by browsers policies
• Videos with audio are usually not allowed to play without the user action

A reference is at https://developer.chrome.com/blog/autoplay

[nazilya06]

Another report: 8708509-zd-a8c

The video works on Android but not iOS.

[rickmgithub]

More info for 8708509-zd-a8c
The user asked why it works on one of their sites but not on another.
Noticed the good site uses Creatio2. The site they pasted it to has the Assembler theme.
Also there are different videos files on both

[filipanoscampos]

User came back again to ask for an update.
The main difference between their two sites (the one where it works and the one where it doesn't) is that one is Atomic, and this one is Simple.

[mrfoxtalbot]

Looking at the number of user reports we are seeing, this bug is impacting quite a few users.

@dsas, is this something you could investigate? Thank you!

[hngdny]

Happening here as well: 8807056-zd-a8c

Simple site using Sunderland theme

[mdtanjid0]

Same case here: 8833868-zen

[dsas]

I've tried many of the sites reported in the linked tickets, and they all work fine in android using chrome. I've tried fewer in Safari, but so far as I can tell videos are autoplaying on atomic sites but not on simple sites. 8708509-zd-a8c mentioned a simple site and an atomic site, so it's a good way to check.

[dsas]

Updated the description to say that the site must be public, and that the issue for private sites is probably wordpress-mobile/gutenberg-mobile#6678

[dsas]

This report appears to be a duplicate of Automattic/jetpack#39148

[dsas]

According to the Safari docs and as @renatho hints on Automattic/jetpack#39148 a video will only autoplay if the video element has autoplay and playsinline attributes and either the video has no audio track or the video element has the muted attribute.

The video element we're outputting on simple sites has neither autoplay or playsinline attributes, however one of its parents - with the class wp-block-cover__video-background has both of those and a muted attribute.

In practice, if I modify the video element to only add playsinline, then it works.

In contrast, the HTML we're outputting on atomic sites is completely different. It is the video element that has the wp-block-cover__video-background class rather than an ancestor div, and the video element has autoplay muted playsinline attributes.

It looks to me that for a simple site we're outputting some videopress HTML and for atomic sites we're outputting some good old fashioned straight HTML.

There's some simple site specific code doing this here: fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Szh%2Qcyhtvaf%2Sivqrbcerff%2Surycref.cuc%3Se%3Q13433srr%231501-og

Simple: 35e34-pb
Atomic: 35e35-pb

[dsas]

Opened D163396-code to resolve

[dsas]

Fix deployed!