Bootstrap ratio 16x9 creating a large gap when using Azure Media Player-CodePudding

I would like to have 2 columns, with the left column being a video (with aspect ratio 16x9) and the right column being a sidebar (with min-width). When the width of the window changes, the video should resize accordingly and the sidebar should maintain it's width.

However, I can't understand why there is a padding top for .ratio::before.

https://imgur.com/a/OtavqX3

Codepen: https://codepen.io/yewzy/pen/PoOxLyO

Here is my code:

 <div  id="main">
<div  id="row-main">
  <div >
        <div  id="content">
        <div >
          <video id="vid"></video>
        </div>
        </div>
  </div>

<div  id="sidebar">
  <iframe ></iframe>
</div>

CodePudding user response：

You should put the ratio class on the element you want to have the 16x9 aspect ratio. This just leaves the ratio-16x9 class on the parent div, and the ratio itself on the video.

Check out the CodePen ~ A Pen for Yew AMP & Ratio-16x9