<span>Resize the browser to see how the video is kept at 16:9.</span>
<div class="box">
<iframe class="content" src="https://www.youtube.com/embed/pU9Q6oiQNd0" frameborder="0" allowfullscreen></iframe>
</div>
.box {
position: relative;
padding-top: 56.25%; /* 9/16 = 56.25 */
}
.box > .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// Does not need any javasript :D
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.