Html 在引导4网格区域内显示视频

我使用Bootstrap4（4.4.1）创建了一个基本的网格结构。它由两列组成（每列宽度为50%），其中左列有两行（每行高度为50%）。左上网格区域应在其内部包含视频，而不挤压或挤压视频。剩下的溢出部分应该隐藏起来。我基本上做到了所有这一切，除了视频跨越整个左列，而我希望它只在列的第一行（跨越50%的列高）

相关HTML代码段：

<div class="container-fluid d-flex h-100 flex-column">      
  <div class="row flex-grow-1">
    <div class="col">
      <div class="row h-50" id="video_wrapper" style="background-color: magenta;">
        <video id="video" autoplay muted></video>
      </div>
      <div class="row h-50" style="background-color: lime;">
        bottom left
      </div>
    </div>
    <div class="col" style="background-color: aqua;">
      <div>
        right side
      </div>
    </div>
  </div>
</div>

我试了很多东西，但都不管用。我下面有一个JSFIDLE。它将使用您的网络摄像头作为视频–关闭网络摄像头以查看网格结构，视频应位于粉红色区域内。不幸的是，它也进入了应该保持自由的绿色区域。您可以在启用网络摄像头时看到此行为

JSFiddle：

---

非常感谢您的帮助。顺便说一句，我是web开发和引导的新手，所以请容忍我：）

将

位置：相对

添加到视频的父级（class

位置相对

就可以了）

---

说明：当您使用

position: absolute;
/* top | bottom | left | right | width (%) | height (%) | 
   min-width (%) | max-width (%)... and there might be a few others */

…元素的大小/位置相对于参考父元素，参考父元素是最接近的父元素（如果没有更接近的父元素，则相对于

）。这表示设置了

位置

而不是

静态

（默认值）的最近父级

看到了

一个关于CSS定位的例子

---

请注意，我还向父级添加了类

d-flex justify content center align items center

，这使绝对定位的元素能够水平和垂直居中，做出响应。

谢谢，这正是我想要的！很好的解释。

position: absolute;
/* top | bottom | left | right | width (%) | height (%) | 
   min-width (%) | max-width (%)... and there might be a few others */