Header Video: Use playVideo after mute instead of autoplay to prevent video blocking because of autoplay with sound enabled

[olivierblancdev]

Hi,

wp-includes\js\wp-custom-header.js uses autoplay to play video.

When it's a video managed by the NativeHandler, the mute attribute is set on the creation of the video element, so there is no problem.

But when it's a YouTube video managed by the YouTubeHandler, the YouTube player is created with the autoplay option active, and the video is muted on the onReady event of the YouTube player. So it can happend that the video tries to autoplay before beeing muted, especially with Firefox, then the video is stopped by the web browser because there is autoplay with sound enabled.

I propose to use e.target.playVideo() after e.target.mute() instead of autoplay to prevent the web browser from blocking the Youtube video if the autoplay starts before e.target.mute() is executed.

Please see ​https://github.com/WordPress/WordPress/pull/471 with the pull request to correct the bug with this solution (or attached files).

Best regards,
Olivier Blanc, web developper

[olivierblancdev]

wp-includes\js\wp-custom-header.js

[olivierblancdev]

wp-includes\js\wp-custom-header.min.js

[celloexpressions]

The proposed change (as linked in the pull request above) seems like it would work, but I'm not completely clear on the need for the change.

It seems like both muting and autoplaying should be specified in the <video> element mark. Or both should be triggered with JS. But we shouldn't need to do a combination of both, which could cause unintended side effects.

As a next step, it would be great to see more research into preferred methods for handling silent autoplayed videos that core could take inspiration from. The linked pull request above should also be turned into an actual patch or linked pull request.