Fix height of Video blocks when native video
is used
#6762
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Builds on top of #6761.
Add
height:auto
tovideo
in Video BlockFirst of all, this addresses findings from @dhaval-parekh in #6443 (comment) whereby when a page is in the loose sandboxing level where a Video block's
video
is not not converted intoamp-video
, the result is the video having excessive height due to thewidth
andheight
being supplied when the dimensions are absent. As noted in #6443 (comment) this is something I've started to explore as a fix in Gutenberg via WordPress/gutenberg#30092, but for now the issue can be fixed by adding theheight:auto
style to.wp-block-video video
in theamp-default.css
stylesheet.video
Before 👎video
After 👍amp-video
after 👍Add
aspect-ratio
to nativevideo
in Video BlockIn WordPress/gutenberg#37052 (comment) I discovered that even though a
video
has itswidth
andheight
defined, it will still have layout shifting happening. In Chromium it appears that the defaultaspect-ratio
has only been implemented forimg
and not forvideo
. In fact, it doesn't seem that thewidth
andheight
onvideo
do anything in Chromium at the moment. Therefore, in order to prevent layout shift from happening forvideo
, it is currently necessary to add an explicitaspect-ratio
style to the element.Non-AMP
non-amp-without-width-or-height.mov
Before: AMP L1 with native
video
andwidth
/height
but noaspect-ratio
👎amp-l1-with-width-or-height-on-native-video.mov
After: AMP L1 with native
video
andwidth
/height
andaspect-ratio
👍amp-l1-with-width-or-height-and-aspect-ratio-on-native-video.mov
This renders exactly in AMP L3 with
amp-video
: no layout shift!Checklist