Как разместить видео в html, используя bootstrap 4?

Question

Я работаю над сайтом, на котором я хочу разместить видео в формате html, используя boostrap 4 . Видео в формате 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

документы подробно встраивают видео в html при использовании Bootstrap 4. Попробуйте заменить фрагмент видео следующим:

<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
• и т.д.