Resize at aspect ratio with pure CSS

index.html

<div class='container'>
  <iframe src='video.mp4' frameborder='0'></iframe>
</div>



<style type='text/css'>
.container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; // This variable defines the height to width ratio
}
.container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* COMMON ASPECT RATIOS
--------------|----------------------
aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%
*/
</style>