CODEWITHSUNDEEP
htmlcssvideobootstrap-4
flash
flash

Reputation: 1519

How to place a video in html using bootstrap 4?

I am working on a website in which I want to place a video in html using boostrap 4. The video is in mp4 format.


The html code which I have tried/used in order to place a video is:

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



Problem Statement:

I am wondering if there is any predefined header class in bootstrap like we have navbar where we can place images and videos. Also, what changes I need to make in order to place a video here:

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

Upvotes: 1

Views: 9132

Answers (1)

Joseph Cho
Joseph Cho

Reputation: 4214

The docs detail embedding videos in html while using Bootstrap 4. Try replacing your video snippet with this:

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

The embed-responsive-16by9 means it's for 16:9 aspect ratios. There are other options like:

  • embed-responsive embed-responsive-4by3 for 4:3 ratios
  • embed-responsive embed-responsive-1by1 for 1:1 ratios
  • etc

Upvotes: 4

Related Questions