News

How to get perfect responsive video

Responsive video can be difficult to get right. Even if the video sizes down proportionately, there may be issues with the type of media player putting black bars around the video.

PerfectRWDvideo

Responsive video can be difficult to get right. Even if the video sizes down proportionately, there may be issues with the type of media player putting black bars around the video.

PerfectRWDvideo

There is a nice technique to eliminate this, and it relies on having one piece of information: the video’s aspect ratio. Thankfully, most modern videos are 16:9, and only rarely 4:3, so 16:9 is a safe default.
The technique is to take a wrapping element with a height of 0, and a padding-bottom value calculated from the aspect ratio. So 16:9 would be 9 / 16 * 100, or 56.25 per cent. Inside this wrapping element is the iframe, or video element which is absolutely positioned to fill the space.

[data-aspect-ratio="16:9"] { position: relative; height:0; padding-bottom: 56.25%; } iframe { position: absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; }
×