jQuery 16:9 (Set container to a fixed but dynamic-width 16:9 ratio)

index.html

<div class="sixteen-nine"></div>

script.js

// set aspect ratio to 16:9
var sixteenNine = function(){
  var width = $('.sixteen-nine').width(); 
 
  $('.sixteen-nine').css('height',width * 0.5625 + 'px')
  
  var height = $('.sixteen-nine').height(); 
  // print out values
  $('.sixteen-nine').html(width + " x " + height); 
};

// on page load
$(document).ready(sixteenNine);
// on window resize
$(window).resize(sixteenNine);

style.scss

// no need for css, but it's prettier this way!

html, body {
  margin: 0;
  height: 100%;
  width: 100%
}

.style { 
  margin: 0;
  padding: 10px;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  background: #f7464a;
  font-size: 100px;
  @media all and (max-width: 630px) {
    font-size: 72px;
  }
  text-align: center;
  max-width: 100%;
  width: 100%;
}

.sixteen-nine {
  @extend .style;
}