CodePen Embed - Pure CSS for Keeping Aspect Ratio

<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 is owned by Tim Wong on CodePen.

See more by @cytim on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.