Question

我正在一个网站上，我想使用 boostrap 4 在html中放置视频。该视频为mp4格式。

我尝试/用来放置视频的html代码是：

<header class="container border masthead_video text-white text-center">
   <div class=""
      type="video/mp4" autoplay="autoplay" loop="loop"></video>
   </div>
   <div class="row mt-5">
      <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
      </div>
   </div>
</header>

问题陈述：

我想知道引导程序中是否有任何预定义的标头类，例如我们可以放置图像和视频的navbar。另外，为了在此处放置视频，我需要进行哪些更改：

 <div class=""
          type="video/mp4" autoplay="autoplay" loop="loop"></video>
 </div>

Answer 1

使用Bootstrap 4时，docs详细信息将视频嵌入html中。尝试用以下代码替换您的视频片段：

first

<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> </div>表示适用于16：9的宽高比。还有其他选项，例如：

embed-responsive-16by9以4：3的比例
embed-responsive embed-responsive-4by3以1：1的比例
等

如何使用Bootstrap 4在html中放置视频？

1 个答案: