css - 使用 Azure 媒体播放器时，引导比率 16x9 造成较大差距

Question

我想要 2 列，左列是视频（纵横比为 16x9），右列是侧边栏（最小宽度）。当窗口的宽度发生变化时，视频应相应调整大小，侧边栏应保持其宽度。

但是，我不明白为什么 .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>

Answer 1

您应该将ratio类​​放在您希望具有 16x9 纵横比的元素上。这只是将ratio-16x9类留在父 div 上，并将其ratio本身留在视频上。

查看 CodePen ~ A Pen for Yew AMP & Ratio-16x9