Bootstrap 比率 16x9 在使用 Azure Media Player 时产生很大的差距

Question

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

但是，我不明白为什么 .ratio::before 有一个 padding top。

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 class 放在您想要具有 16x9 纵横比的元素上。这只会在父级 div 上留下 ratio-16x9 class，在视频上留下 ratio 本身。

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

Bootstrap 比率 16x9 在使用 Azure Media Player 时产生很大的差距

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

css

flexbox

twitter-bootstrap

azure-media-player

bootstrap-5