No video controls on a Cover Block with video background

[maddisondesigns]

Description

There's no video controls in the Cover Block when it has a video background.

When you're editing the page, this is incredibly annoying as the video just constantly plays over and over again, which in turn, causes the fan on my laptop to go crazy. Editing a page shouldn't be this resource intensive.

At the bare minimum, there should be a Play/Pause control on the Cover Block toolbar to allow you to stop the video from constantly playing when editing the page.

There should also be settings in the settings sidebar, like the Video Block, to specify whether the video should be looped and/or muted on the frontend.

Gutenberg.Cover.Block.No.Video.Controls.mp4

Step-by-step reproduction instructions

• Add cover block and select a video to use as the background
• Watch video play over and over without being able to control it or stop it

Screenshots, screen recording, code snippet

No response

Environment info

WP 5.9
Twenty Twenty One
Firefox 97.0.1
macOS 12.1
No Gutenberg plugin, core only

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[courtneyr-dev]

It could be useful to have a speed control option here as well when a user is creating a Cover block. Play the video on loop at .5 speed or less.

[maddisondesigns]

An option to control the playback speed is a great idea as well.

[ramonjd]

Setting autoPlay to false on the video element in Cover Block edit.js will stop the video, but yes, it would be better to have a control to toggle this in the editor.

We'd also want the autoPlay setting to be reflected on the focal point picker as well:

That would remove the "annoyance" effect, at least in the editor.

The only question is whether reflect the state in save.js, and therefore the frontend. If so, then maybe it should be a consideration for background block support.

Otherwise we'd probably have to add more attributes to the Cover Block, which might not be an ideal long-term solution. See the discussion over at #38784

[cbirdsong]

This is also an accessibility problem in the front end. The lack of a play/pause button is a failure of WCAG 2.1 Success Criterion 2.2.2: Pause, Stop, Hide. It also doesn't respect prefers-reduced-motion, which should make the video start out paused.

[SincroAI]

This should work. It will hide the playback video controls automatically as well you/the user can control the sound (mute, loud, etc.)

HTML

CSS
.videoWrapper > video {
width: 100%;
height: 100%;
object-fit: cover; <<< This might not work in IE (earlier versions..)
}

Hope this helps.

[ryanAllMad]

Curious if anyone has noticed that this problem also creates an issue for WCAG 1.1.1 Text Alternatives Level A and if adding the Text Tracks setting to the cover block will be part of this fix?

[tnchuntic]

Inline with the settings is it possible also to add a lazy for cover video? Currently it loading the video even if the video is not in viewport. It might conflict with with autoplay, not sure :).

Found some post about lazy loading from google web.dev https://web.dev/lazy-loading-video/.