Responsive video embeds
Fixed 640×360 frames crop on phones and float in wide columns. Two lines of CSS fix it for good, and there is a fallback for older stacks.
Give the iframe width: 100%, height: auto and aspect-ratio: 16 / 9 in CSS. On older stacks, wrap it in a box with padding-top: 56.25% and place the frame inside it. Either way the player scales with its column, and the page saves the right space before it loads.
Nothing about an iframe is responsive by default. It is a fixed box, sized by its width and height attributes. It will spill off a phone screen or sit small and lonely in a wide column. Images learned to scale years ago, because max-width: 100% works on them. Iframes need the height set separately. The browser has no idea what shape the content inside wants.
The fix is short. Modern CSS has an aspect-ratio property that does just what the name says. For the rare stack that cannot use it, a padding trick has worked since the first responsive sites. This guide shows both. It gives the numbers for every common ratio, including vertical video. It also covers the details that stop a scaled player from shifting the page or growing huge on desktop. For the rest of the player topics, see the player and embedding hub.
Why the default embed misbehaves
The VideoBB embed ships with width="640" height="360", which is a sensible 16:9 default and a correct hint for reserving space. The trouble begins when the column is narrower than 640 pixels. A phone in portrait is typically under 430 CSS pixels wide, so the frame either overflows and causes horizontal scrolling or is clipped by an overflow: hidden container. Going the other way, a 640-pixel frame in a 900-pixel column looks like an afterthought. And the naive fix of width: 100% on its own makes matters worse. The width stretches but the height stays at 360 pixels. The player is then letterboxed on wide screens and squashed on narrow ones.
The player inside the frame is already responsive. It fills whatever box it is given and lays out controls for that size. All the page has to do is give it a box with the right proportions.
The modern fix: aspect-ratio
Three declarations on the iframe solve it:
iframe.videobb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
width: 100% lets the frame fill its column. height: auto releases the fixed 360 from the attribute so the ratio can take over. aspect-ratio: 16 / 9 tells the browser to compute the height from the width. The width and height attributes can stay in the HTML. They still reserve space during load and act as a fallback wherever the CSS does not apply. aspect-ratio has worked in Chrome, Edge, Firefox and Safari since 2021. Unless you support browsers several years out of date, this is the whole answer.
Add a class to the iframe in the embed code, or target it by its source. The selector iframe[src*="videobb.com/embed"] works without touching the markup. It also catches embeds pasted by editors who forget the class.
The padding-top fallback
If you maintain an older stylesheet or a framework that predates aspect-ratio, the padding trick still works everywhere. It relies on the fact that percentage padding is calculated from the container's width, even for top and bottom.
- Wrap the iframe in a
divwith a class such asvideo-wrap. - Give the wrapper
position: relative; width: 100%; height: 0; padding-top: 56.25%;. The padding creates a box whose height is 56.25% of its width, which is 9 ÷ 16. - Give the iframe
position: absolute; top: 0; left: 0; width: 100%; height: 100%;so it fills the padded box. - Remove or override the iframe's height attribute; the absolute positioning ignores it, but leaving
height: 100%explicit avoids surprises. - Set a
max-widthon the wrapper if the column is wide, so the player does not balloon.
Aspect ratios and their padding values
Use the ratio directly with aspect-ratio, or the percentage with the padding fallback.
| Video shape | aspect-ratio | padding-top | Typical use |
|---|---|---|---|
| Widescreen | 16 / 9 | 56.25% | Most modern video |
| Classic television | 4 / 3 | 75% | Older footage, some webcams |
| Square | 1 / 1 | 100% | Social clips |
| Vertical | 9 / 16 | 177.78% | Phone video, short-form |
| Ultrawide | 21 / 9 | 42.86% | Cinematic crops |
| Scope | 2.39 / 1 | 41.84% | Anamorphic film |
Vertical and square video
A 9:16 embed at width: 100% in a desktop column is nearly twice as tall as it is wide, which can mean a player taller than the viewport. Constrain it: max-width: 420px; margin-inline: auto; centres a phone-shaped player at a sensible size, or use max-height: 80vh together with width: auto so it never exceeds the screen. Square video is easier, but still benefits from a max-width. In both cases the ratio must match the actual video, or the player will letterbox inside the box. Check the source's dimensions before choosing a value. If you regularly publish vertical clips, the preparing video for upload guide covers exporting them at the right shape. A clip that was saved sideways needs fixing in the file, not the CSS; the free rotate tool turns it upright before you upload it.
Constrain the width, not just the ratio
Responsive does not mean as large as possible. A 16:9 player that fills a 1,400-pixel content area is bigger than most screens can show without scrolling, and it drags the page's other content out of view. Give the wrapper or the iframe a max-width matched to your column (for prose, somewhere around 720 to 960 pixels is common) and centre it. Sometimes the player sits in a component that can be narrow or wide, depending on where it is placed. There, container queries let you switch the max-width by the container's size, not the viewport's. That holds up better in a sidebar or a card grid.
Resist JavaScript-based resizing. Scripts that measure the column and set the height on resize events cause flicker, fight the browser's own layout, and break when the page is printed or rendered without scripts. CSS does the job with no runtime cost.
Framework and CMS notes
Tailwind's aspect-video utility sets a 16:9 ratio, and aspect-square a 1:1 ratio; combine with w-full. Bootstrap ships a .ratio wrapper with modifiers such as .ratio-16x9, which is the padding technique in a class. WordPress themes vary: some wrap embed blocks responsively and some do not. So paste the iframe into a Custom HTML block, as the embedding guide and the embed reference describe. Then target it with the attribute selector above from your theme's custom CSS.
In email newsletters none of this works, because most email clients do not render iframes. Link a thumbnail to the video page instead. The thumbnails guide shows how to make it worth clicking. Some email clients will play an animated GIF, so a few seconds turned into a loop with the video to GIF tool can stand in as the preview. Keep it short, because GIF files grow large quickly.
A five-minute test
- Resize the browser from wide to about 360 pixels; the player should never cause horizontal scrolling.
- Check the widest layout; the player should stop growing at your max-width and stay centred.
- Reload with the network throttled and watch for content jumping when the frame appears.
- Enter fullscreen and exit; the frame should return to the same size.
- Rotate a phone; the player should reflow without a reload.
- Print preview: the reserved box should not stretch across pages.
Frequently asked questions
Does the player inside the iframe know it has been resized?
Yes. The player fills the frame it is given and lays out its controls for that size, the same way it does on the video's own page. You do not need to pass a size to it or reload it. What the page controls is the box; what the player controls is everything inside the box, including choosing a rendition appropriate to the frame's current dimensions.
Can I use max-width: 100% instead of width: 100%?
Only with care. max-width: 100% caps the frame at the column width. It leaves the frame at 640 pixels in wider columns, which may suit a modest inline player. It still needs height: auto and aspect-ratio, otherwise the height stays at 360 pixels when the width shrinks on a phone and the player is squashed.
Why is there a black bar above and below my video?
The box's ratio does not match the video's. A 4:3 video in a 16:9 box shows bars at the sides. A 16:9 video in a 4:3 box shows bars at the top and bottom. The player is doing the right thing by keeping the picture's shape. Check the source dimensions and set the ratio to match, using the table above.
Should I use the padding hack or aspect-ratio?
Use aspect-ratio unless you have a concrete reason not to. It has been in every major browser since 2021, it needs no wrapper element, and it is easier for the next person to read. The padding technique remains correct and is what older framework classes implement, so there is no harm in keeping it where it already exists.
Sources
- MDN: aspect-ratio — Property reference and browser compatibility.
- MDN: <iframe> element — Width and height attributes and how they interact with CSS.
- web.dev: Cumulative Layout Shift — How unreserved embeds are measured as layout shift.
- MDN: CSS container queries — Sizing components by their container rather than the viewport.
Related guides
How to embed a video on a website
Copy one iframe, understand the six attributes it carries, and add the query parameters that control autoplay, mute, start time and looping.
Prepare video for upload
The right export is smaller, uploads faster, is accepted without complaint and transcodes cleanly. It is not the highest possible quality and it is not the smallest file. Here is the middle.
Video player features that matter
Adaptive quality, fast seeking, captions, keyboard control and picture-in-picture do more for viewers than any skin. Here is what to look for and why.