Skip to content

Video block: Should have width height dimensions to prevent cumulative layout shift (CLS) #52185

@porg

Description

@porg

WordPress video block output without width height dimensions hence causes cumulative layout shift CLS

Reproduction

  1. Create a page.
  2. Insert a video block.
  3. Save and then watch the HTML output in the frontend.

Actual

  • The <video> element does not have the attributes width and height.
  • 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

  1. When you insert a video block and set/change the source,
  2. … the Block Editor gets the image dimensions from:
    • a. Supported video service
    • 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)
  3. … and inserts the width and height parameters into the video element accordingly:

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 with width and height?
    • 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).

Metadata

Metadata

Assignees

Labels

[Block] VideoAffects the Video Block[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions