Use intrinsic as default layout for video instead of responsive layout

[westonruter]

Summary

When we first implemented the video sanitizer, we chose the responsive layout because intrinsic was not initially available. Support for the intrinsic layout was added to amp-video in ampproject/amphtml#28349, but we didn't make the same change to the video sanitizer since it didn't seem necessary, even though we do use intrinsic as the default layout in the image sanitizer. However, I found a reason why it is needed. Namely, when a video is set to align left or right, it fails to render as responsive:

Non-AMP	AMP Before 👎	AMP After 👍

Here's the markup I'm testing with:

<!-- wp:video {"id":1690,"align":"center"} -->
<figure class="wp-block-video aligncenter" id="bard"><video controls src="https://wordpressdev.lndo.site/content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video><figcaption>No align.</figcaption></figure>
<!-- /wp:video -->

<!-- wp:video {"id":1690,"align":"left"} -->
<figure class="wp-block-video alignleft" id="bard"><video controls src="https://wordpressdev.lndo.site/content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video><figcaption>Align left</figcaption></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>This is a paragraph with a video floated to the left!</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":1690,"align":"full"} -->
<figure class="wp-block-video alignfull" id="bard"><video controls src="https://wordpressdev.lndo.site/content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video><figcaption>Full width</figcaption></figure>
<!-- /wp:video -->

Checklist

• My code is tested and passes existing tests.
• My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

[github-actions]

Plugin builds for 1a12630 are ready 🛎️!

• Download development build
• Download production build

[delawski]

The code looks good and it works as advertised (see below in AMP Standard mode):

[bartoszgadomski]

When I copy-pasted the markup that @westonruter used, it ended up with this:

AMP disabled	AMP enabled

However, when I uploaded custom video to media library and replaced it in post content, it was rendered correctly:

AMP disabled	AMP enabled

To summarize:

• if provided video link is invalid, AMP set static width:auto and height:400px CSS properties and render video incorrectly
• if provided video link is valid, AMP render it correctly, but force the SSL, which ends up with errors on localhost (not sure if it's a bug or feature):

So in regards to this ticket which is limited to setting the "intrinsic" layout instead of "responsive", this works as expected, so I'm gonna mark this ticket as QA-passed.

In regards to the two issues I've found, these probably needs their separate bug tickets, but can you confirm @westonruter that these behaviors are indeed not expected?

[westonruter]

• if provided video link is invalid, AMP set static width:auto and height:400px CSS properties and render video incorrectly

If the video is not in the media library, then it will use the fallback height of 400. So that seems correct.

• if provided video link is valid, AMP render it correctly, but force the SSL, which ends up with errors on localhost (not sure if it's a bug or feature):

AMP requires HTTPS for videos, so if testing on an environment that doesn't have SSL then it would be expected that there would be loading errors.