JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">

   <div id="embed_container" class='embed-container'>
      <iframe src='http://player.vimeo.com/video/29885745' id="video" frameborder='0'
      webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
   </div>

</section>

CSS

.embed-container { 
position: relative; 
height: 0; 
overflow: hidden; 
width: 100%; 
height: auto; 
}

.embed-container iframe, .embed-container object, .embed-container embed { 
    width: 100%;
}

JavaScript

var container = document.getElementById('embed_container');
var video = document.getElementById('video');
var ratio = 9/16; //this is why the 56.25% padding hack exists

function resizer() {
    var width = parseInt(window.getComputedStyle(container)['width'], 10);
    var height = (width * ratio);
    
    video.style.width = width + 'px';
    video.style.height = height + 'px';
    video.style.marginTop = '-3.278%'; //~732px wide, the video border is about 24px thick (24/732)
    
    container.style.height = (height * 0.88) + 'px'; //0.88 was the magic number that you needed to shrink the height of the outer container with.
}

//attach event on resize
window.addEventListener('resize', resizer, false);

//call function for initial sizing
//no need for padding hack since we are setting the height based off of the width * aspect ratio
resizer();
//container.style.padding = 0;