Fix layout shift caused by video tag in Video block lacking width and height
#70293
+95
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +26 B (0%) Total Size: 1.85 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @porg. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
westonruter
commented
Jun 3, 2025
| @@ -3,6 +3,7 @@ | |||
| box-sizing: border-box; | |||
| video { | |||
| width: 100%; | |||
| height: auto; | |||
There was a problem hiding this comment.
Without this, the aspect-ratio doesn't cause the height of the element to be the intrinsic height based on the resized width. Notice the white bars on the top and bottom of the video, causes by the default object-fit:contain styles when height:auto is absent:
| Before | After |
|---|---|
 |
 |
|
Flaky tests detected in c048eb8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/15459358151
|
|
@Mamaduka anything else you want to see here prior to working on a backport PR for core? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Fixes #52185
When adding a video from the Media Library to a Video block, this supplies the
widthandheightattributes for the Video based on the dimensions in metadata if available. The dimensions are also supplied in an inlineaspect-ratiostyle (due to w3c/csswg-drafts#7524) to go along with aheight:autostyle (originally proposed in #37052 as a follow-up to #30092). We can't yet useaspect-ratiowithattr()in a rule like this since it's not yet supported in Firefox or Safari:The changes in this PR are also available in a standalone plugin for existing sites to use before the change is published in a Gutenberg release: Layout-stabilized Video Block.
See blog post with full writeup: Eliminating Layout Shifts in the Video Block
Why?
This eliminates a layout shift which occurs while the video loads. The result is an improved Cumulative Layout Shift (CLS) metric for Core Web Vitals.
Testing Instructions
Screenshots or screencast
intrinsic-dimensions-before.webm
intrinsic-dimensions-after.webm