Disable/hide muted toggle in Video block when autoplay is enabled

[westonruter]

Bug Description

As discussed in ampproject/amphtml#28041, when an amp-video has the autoplay attribute the video will forcibly be muted. As such, the muted attribute has no effect and it is deprecated. Nevertheless, the Video block provides toggles for both autoplay and muted:

When autoplay is toggled-on, there is actually an warning currently added and yet the Muted toggle is still displayed:

This is misleading on sites with the AMP plugin because even though the Muted toggle is not enabled, the video will still be muted.

Expected Behaviour

The Muted toggle should be either hidden, or a notice should be added to indicate that autoplay videos will be muted on AMP pages regardless of the Muted toggle state.

The muted attribute should he then omitted from the amp-video elements created from the Video block.

Steps to reproduce

1. Add a video block.
2. Enable the autoplay toggle.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

The “plays inline” toggle probably doesn't make sense either when “autoplay” is enabled.

[swissspidy]

Just ran into the muted is deprecated warning for a video with autoplay off.

The plugin's validation tool did not warn me about this deprecation message, so I only learned it through Search Console. It would be great if the plugin would warn me about this.

In ampproject/amphtml#28041 (comment) it was mentioned that it's difficult or even impossible to remove the "Muted" UI control in Gutenberg. If that's still the case, perhaps that can be reported upstream?

[westonruter]

It's been awhile since I looked at this, so I'm confused. You're seeing the muted is deprecated notice when autoplay is off? I'm not seeing that warning in the the validator. I'm not seeing it when autoplay is absent (see playground) or present (playground).

[swissspidy]

Yes. It's absent, to be precise. But in the editor it's "off" like this:

The markup is as follows:

<figure class="wp-block-video"><amp-video width="1920" height="1080" controls="" muted="" poster="https://pascalbirchler.com/wp-content/uploads/2021/08/Web-Stories-Client-Side-Video-Optimization-poster.jpeg" src="https://pascalbirchler.com/wp-content/uploads/2021/08/Web-Stories-Client-Side-Video-Optimization.mp4" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer><a href="https://pascalbirchler.com/wp-content/uploads/2021/08/Web-Stories-Client-Side-Video-Optimization.mp4" fallback="">https://pascalbirchler.com/wp-content/uploads/2021/08/Web-Stories-Client-Side-Video-Optimization.mp4</a><noscript><video width="1920" height="1080" controls muted poster="https://pascalbirchler.com/wp-content/uploads/2021/08/Web-Stories-Client-Side-Video-Optimization-poster.jpeg" src="https://pascalbirchler.com/wp-content/uploads/2021/08/Web-Stories-Client-Side-Video-Optimization.mp4" playsinline></video></noscript></amp-video><figcaption>Client-side video optimization in the Web Stories editor in action</figcaption></figure>

Search Console complains:

The attribute 'muted' in tag 'video' is deprecated - use 'autoplay' instead.

[westonruter]

Ah, it's specifically flagging the presence of muted on the noscript > video fallback element.

The muted attribute on amp-video itself is not deprecated: https://github.com/ampproject/amphtml/blob/530fc13c795099f03ac043739eac0aa22c7372e6/extensions/amp-video/validator-amp-video.protoascii#L75-L78

It is, however, on amp-video > noscript > video: https://github.com/ampproject/amphtml/blob/530fc13c795099f03ac043739eac0aa22c7372e6/validator/validator-main.protoascii#L1836-L1840

This was done 5 years ago: ampproject/amphtml@7cb88f7#diff-b9292e22ae04c8d88da089f65bb8e7c7a00d53cb971335179b9cfa303752c82a

But the muted attribute on amp-video never seems to have been deprecated in the validator.

Therefore, it seems the quick fix here is just to omit the muted attribute from the noscript > video fallback, as simple as the following:

diff --git a/includes/sanitizers/class-amp-video-sanitizer.php b/includes/sanitizers/class-amp-video-sanitizer.php
index f929566b5..bbf4797cb 100644
--- a/includes/sanitizers/class-amp-video-sanitizer.php
+++ b/includes/sanitizers/class-amp-video-sanitizer.php
@@ -62,6 +62,9 @@ public function sanitize() {
 
 		if ( $this->args['add_noscript_fallback'] ) {
 			$this->initialize_noscript_allowed_attributes( self::$tag );
+
+			// Omit muted from noscript>video since it causes deprecation warnings in validator.
+			unset( $this->noscript_fallback_allowed_attributes['muted'] );
 		}
 
 		for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {