css - ブートストラップ比率 16x9 により、Azure Media Player の使用時に大きなギャップが生じる

Question

左の列がビデオ (アスペクト比 16x9) で、右の列がサイドバー (最小幅) の 2 つの列が必要です。ウィンドウの幅が変更されると、それに応じてビデオのサイズが変更され、サイドバーはその幅を維持する必要があります。

しかし、なぜ.ratio::beforeのパディングトップがあるのか​​理解できません。

https://imgur.com/a/OtavqX3

コードペン: https://codepen.io/yewzy/pen/PoOxLyO

これが私のコードです：

 <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>