Responsive / fluid width videos
How I've done responsive videos in the past
In the past I've used a couple of different methods to achieve responsive videos:
- The first thing I used often was a jQuery plugin called FitVids.js.
- Later I swapped to using CSS only version like Bootstrap uses.
The HTML for both is pretty straightforward you have wrapper div and an iframe. In bootstrap the iframe would need a class added to it while FitVids handled this.
As with the HTML the CSS between the two is very similar.
First you have the wrapper class
- Width - The width is set to
100%, this makes the container fill the space, but also makes it shrink. If need you could also set a max-width to keep the video from getting too wide.
- Display - The display is set to
block, this is here for when the wrapper isn't a block level element. An inline level element would end up being 0px tall because the padding that is added in a later stage wouldn't apply.
- Position - The position is set to
relative. The iframe is being set to absolute so this keep the iframe relative to it's parent.
- Overflow - The overflow is set to
hidden. This prevents the video from overflowing the parent, in theory this shouldn't be needed as long as the aspect ratio of the video is right and FitVids actually omits it.
- Padding - The padding is set to
0. This clears any padding from the wrapper, because any padding on the parent would throw off the resizing of the video.
The iframe styles
- Width and height: The width and height are set to
100%to make the iframe match the parent containers height and width.
- Position: The position is set to
absoluteand the top, bottom, left, and right to
0(today you could do this using
Setting the aspect ratio
This is where the real magic of it happens. You would set either the top padding of the wrapper (FitVids) or a psuedo selector of the parent (Bootstrap) to a value relating to the aspect ratio of the video. For this example I'm going to use a value of
56.25%, since the video is 16x9 (to learn how to find this value you can read this A list apart article by Thierry Koblentz).
- Content: This is required for a pseudo element show in the page at all.
- Display block: This makes sure the pseudo element works as a block level element, if you were to leave it as an inline element the top padding would have no effect.
- Padding top: This is where the padding value based on the aspect ratio is added.
How I manage responsive videos now
The HTML can be pretty simple. I'd suggest adding a class to iframes that you want to be responsive (I'd probably avoid globally adding it to all iframes, just incase there are embeds you don't want working this way).
<iframe class="responsive-video" src="..."></iframe>
The CSS in this method is quite a bit more clear.
- Width and height - The width and height are still set to
100%. This makes the iframe try to be as wide and tall as possible.
- Aspect ratio - The aspect-ratio is set to
16 / 9prevents the width and height from stretching the video beyond the 16:9 aspect ratio, which would result is blank space in the iframe. Additionally you can set the aspect ratio to whatever ratio you want.
- Object fit - The object-fit is set to
containthis makes the iframe try and expand to the largest width and height that it can without clipping outside it's parent bounds.
aspect-ratio: 16 / 9;
Not all videos will be 16:9 so you could add some additional class to cover more aspect ratios.
aspect-ratio: 16 / 9;
aspect-ratio: 4 / 3;
aspect-ratio: 1 / 1;