Video Block: Add Size Controls

[donalirl]

When inserting a video block, the video can appear very large on the page because it automatically fits to the theme's content area. This is especially apparent for videos recorded on mobile phones.

There is a workaround to use a shortcode and set the width and height in the shortcode.

It would be great to have controls in the video block settings to set the size of the video on the page. These could potentially look similar to the size settings in the Image Block:

[skorasaurus]

from @porg at https://github.com/WordPress/gutenberg/issues/52185

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](https://web.dev/cls/) (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

     * ✅ YouTube — Creates an iframe with concrete width/height, was seemingly done in [Can't style embedded videos properly due to inline width & height #8383](https://github.com/WordPress/gutenberg/issues/8383)
     * ❓Vimeo  — Did not test this.
   * b. x The Media Library — Tested: Creates no width/height attributes.
   * c. question 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:

   * 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 its `src`, `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](https://github.com/WordPress/gutenberg/issues/9457)

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).

[hanneslsm]

I'd like to add that not only the dimension controls in the sidebar are missing, but also the handle we know from images, to change the size with the mouse, as shown in the video here: https://github.com/WordPress/gutenberg/issues/50018

[porg]

This issue should indeed get expedited

• @hanneslsm An upvote on top helps a bit.
• @ajlende and @richtabor : You two worked intensively on the closely related:

  51138

  • Could you possibly apply that for the video element?
  • Also pay attention to #52185
• CC: @jordesign and @ndiego