How to make YouTube embedded video responsive with CSS

Making embedded video responsive requires just few lines of CSS code. First of all, you need to wrap embedded video content with some container. It should look like this:

<div class="video-wrapper">
    <iframe>...</iframe>
</div>

Next step for making your embedded video responsive is to apply some css styles:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
 
    iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    }
}

In the end, you should know that “crazy” paddings are not an accident. What you need is 56.25% padding-bottom to create 16:9 ratio for video content (9 divided by 16 is 0.5625) and top padding 25px will help you avoid issues such as broken box model.

Enjoy!