Why your page jumps when video loads (and how to stop it)

You know the experience: a page loads, you go to tap something, and at the last moment the page shifts and you tap something else. It is one of the most reliably irritating things on the web and it has a single cause — content arriving without its space having been set aside.

Why video widgets are prone to it

A widget usually does not know what it is rendering until it has asked. How many videos, at what aspect ratio, in how many columns at this screen width — all of that is decided after the page’s HTML has already been laid out.

So the section starts at zero height, then becomes tall, and everything below it moves. On a product page that is the price, the variant picker and the add-to-cart button jumping down exactly when a shopper is reaching for them.

The fix, and why it is subtle

Reserve the height before the content arrives. Obvious in principle; the difficulty is that the reservation has to be right.

A placeholder that is too short shifts when the real content is taller. A placeholder that is too tall shifts when it collapses. A placeholder that is exactly right produces no shift at all — and a first frame whose space is the final space is the only version that actually works.

This is why “we set a min-height” often does not solve it. A guessed height is a shift waiting for a screen size you did not test.

The trap nobody expects

Some performance techniques cause the problem they are meant to prevent. Skipping the layout work for off-screen content is a genuine optimisation — but it means the browser lays that section out at its placeholder size on the first frame and at its real size later. If those differ, you have built a layout shift while trying to build a fast page.

The lesson generalises: any optimisation that defers layout has to be paired with a size that is correct, not approximate.

How to find it on your own store

Chrome DevTools, Performance panel, record a load with network throttled to a slow connection. Layout shifts are marked on the timeline and you can see exactly what moved and what caused it.

Throttling matters. On a fast connection everything arrives close enough together that the shift is invisible to you and fully visible to a shopper on a train.

The other sources

While you are looking, the usual suspects are worth checking: images without width and height, web fonts that swap in and change text height, cookie banners and announcement bars that load late, and anything injected by a third-party script above the fold.

Video widgets get blamed for layout shift more than they deserve, because they are the most recently added thing. Record the trace before concluding.