我有一個非常簡單的頁面，其中有2列。視頻和內容，我需要做的寬度和高度響應像圖像流體。

我的代碼

<div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-6">
        <div>
          <video muted="" autoplay="" loop=""
            src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"
            width="950">
            <img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast">
          </video>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 align-self-center" >
        <h3>Fast</h3>
        <p>Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
        </p>
      </div>
    </div>
  </div>

像這樣

.video_div{
  margin-left: -210px;
}
@media (max-width:1199px){
  .video_div{
    margin-left: -270px;
  } 
}

<div class="container">
    <div class="row">
      <div class="col-lg-7 col-md-12">
        <div class="video_div">
          <video muted="" autoplay="" loop=""
            src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"
            width="950">
            <img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast">
          </video>
        </div>
      </div>
      <div class="col-lg-5 col-md-12 align-self-center" >
        <h3>Fast</h3>
        <p>Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
        </p>
      </div>
    </div>
  </div>

如果您使用的是Bootstrap 5，則可以使用比率幫助器:

使用比率幫助器管理外部內容的縱橫比，如 & ltiframe & gts，& lt嵌入& gts，& lt視頻& gts，并且& ltobject & gt這些助手也可以 可用于任何標準HTML子元素(例如，或)。 樣式是從父級應用的。比率類直接傳遞給子類。

資料來源:https://getbootstrap.com/docs/5.0/helpers/ratio/

<link  rel="stylesheet" />

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

您可以使用將任何視頻標記包裝在父元素中。嵌入響應和縱橫比。也可以給視頻標簽一個. embed-responsive-item類

<div class="embed-responsive embed-responsive-21by9">
  <video class="embed-responsive-item" muted="" autoplay="" loop="" src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4" width="950">
            <img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast /">
   </video>
</div>

官方引導文檔-嵌入

<video class="w-100" autoplay loop muted>
  <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
</video>

@*Note: w-100 is from Bootstrap 5.*@