-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Closed
Labels
[Block] VideoAffects the Video BlockAffects the Video Block[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
Reproduction
- Create a page.
- Insert a video block.
- Save and then watch the HTML output in the frontend.
Actual
- The
<video>
element does not have the attributeswidth
andheight
. - This causes cumulative layout shift (CLS) which is bad for usability and SEO metrics.
- Either during DOM initialization — the element starts with dimensions guessed from its CSS width plus the assumed fallback aspect ratio of a video (e.g. in Safari this seems to be 2:1).
- Or if the video uses
preload = none
, also after the DOM is ready, it has this provisional dimensions and as soon as the user clicks PLAY, and the browser starts fetching the video and determines its width/height, then layout shift occurs.
Expected
- When you insert a video block and set/change the source,
- … the Block Editor gets the image dimensions from:
- a. Supported video service
- ✅ YouTube — Creates an iframe with concrete width/height, was seemingly done in Can't style embedded videos properly due to inline width & height #8383
- ❓Vimeo — Did not test this.
- b. ❌ The Media Library — Tested: Creates no width/height attributes.
- c. ❓ Externally hosted video file — Did not test this yet — By an API which returns the video dimensions by loading the video's first few bytes (moov atom at the start) or the last bytes (metadata at the end)
- a. Supported video service
- … and inserts the
width
andheight
parameters into the video element accordingly:- Independent from the block dimension or alignment settings ( None, Wide, Full Width). Like with the Image block with its own dimensions and the underlying
img
element with itssrc
,width
,height
. - And does this for each source as soon as we have Video Block: alternate sources such as ogv and webm file formats #9457
- Independent from the block dimension or alignment settings ( None, Wide, Full Width). Like with the Image block with its own dimensions and the underlying
Environment
- WordPress 6.2.2
- Gutenberg 15.9.1
Infos to be amended by experts please
- Prioritization: I assume CLS optimization is a goal of WordPress.
- I assume this is not a SEO luxury only.
- But a real usability problem (especially when having multiple videos (with aspect ratios quite different than the assumed fallback)) — Then viewport shifting is noticeable to even disturbing.
- WordPress Classic: Does it create
video
elements withwidth
andheight
?- I never used Classic, and do not plan to set it up.
- If someone knows please comment.
- I guess what I describe under "expected" steps 2abc probably all need certain WordPress Core API calls.
- Please tell whether such functions exists or not in comments below.
- Please file corresponding ticket(s) in WP Core to provide the necessary function(s).
cbirdsong and swissspidy
Metadata
Metadata
Assignees
Labels
[Block] VideoAffects the Video BlockAffects the Video Block[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended