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

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 class="container" id="main">
<div class="d-flex" id="row-main">
  <div class="col-sm-9 col-12">
        <div class="flex-grow-1" id="content">
        <div class="ratio ratio-16x9">
          <video id="vid"></video>
        </div>
        </div>
  </div>

<div class="col-sm-3 col-12" id="sidebar">
  <iframe class="chat"></iframe>
</div>

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