Contents

Video Intrinsic Width

The video's real pixel width, which lets the browser reserve the right space before it loads.

Where to find it
Labelled Video Intrinsic Width in the "Selected Component" section of the Modify drawer.
Offered by
The Video component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This solves the same problem for video that intrinsic width solves for images: the page jumping about as things load. Until the browser knows how big the video is, it does not know how much room to leave, so it leaves none — and then shoves everything down when the video announces itself.

Telling it the video's real dimensions in advance lets it hold exactly the right space open from the start. Video is worth being particularly careful about here, because a video takes longer to load than an image, which means a longer window in which the jump can happen.

This is the video's actual pixel width as it was recorded — 1920 for ordinary HD footage — not the size you want it displayed at. Set the display size on the column's Width instead.

Always set this together with Video Intrinsic Height. Neither is any use on its own.

When you would use it

  • Every video. It is the most effective thing you can do for how stable the page feels.

How to change it

  1. Click the video component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Video Intrinsic Width".
  3. Enter the video's real pixel width — 1920 for most HD footage, 1080 for portrait phone video.
  4. Set Video Intrinsic Height to match.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Set both width and height or neither. One alone does nothing useful.
  • These describe the file, not the space on the page. Getting the ratio wrong reserves a space of the wrong shape and the jump comes back.
  • If Video Transformations changes the shape, these numbers should describe the result, not the original.

Related settings

For developers

The technical reference for what this setting produces: MDN: the width attribute. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next