css Bootstrap 5如何使视频大小响应

2lpgd968 于 2023-01-18 发布在 Bootstrap

关注(0)|答案(3)|浏览(189)

我有一个非常简单的网页，其中有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>

像这样

css

来源：https://stackoverflow.com/questions/71453855/bootstrap-5-how-to-make-video-size-responsive

3条答案

按热度按时间

fykwrbwg1#

您可以使用.embed-responsive和aspect ratio Package 父元素中的任何video标签。也可以为video标签指定.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>

Official Bootstrap Docs - embed

赞(0）回复(0）举报 2023-01-18

ffvjumwh2#

如果使用Bootstrap 5，则可以使用比率辅助对象：
使用ratio帮助器管理外部内容（如<iframe> s、<embed> s、<video> s和<object> s）的纵横比。这些帮助器还可用于任何标准HTML子元素（如或）。样式从父. ratio类直接应用于子元素。
来源：https://getbootstrap.com/docs/5.0/helpers/ratio/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

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

赞(0）回复(0）举报 2023-01-18

gdrx4gfi3#

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

赞(0）回复(0）举报 2023-01-18

我来回答

css Bootstrap 5如何使视频大小响应

3条答案

相关问题

热门标签

最新问答