如何使用引导程序 4 在 html 中放置视频？

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

docs 详细说明了在使用 Bootstrap 4 时在 html 中嵌入视频。尝试将视频 sn-p 替换为：

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

embed-responsive-16by9 表示它适用于 16:9 的纵横比。还有其他选项，例如：

• embed-responsive embed-responsive-4by3 用于 4:3 比率
• embed-responsive embed-responsive-1by1 用于 1:1 比率
• 等