Video

Bootstrap Video - free examples, templates & tutorial

Resonsive video templates for Bootstrap 5. It can be used in carousels, modals, as a video background, for presenting a video gallery or simply as a player.


YouTube iFrame

A simple template for embedding a YouTube video in Bootstrap 5 layout, with the use of an iframe.

        
            

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

          
        
    

Vimeo iFrame

A simple template for embedding a Vimeo video in Bootstrap 5 layout, with the use of an iframe.

        
            

          <iframe src="https://player.vimeo.com/video/137857207" title="Vimeo video" allowfullscreen></iframe>

          
        
    

Responsive mp4 file

Use .w-100 class to make the video responsive and always adjusted to the width of its parent.

        
            

          <video class="w-100" autoplay loop muted>
            <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
          </video>

          
        
    

Hover to play

Hover over the video to start playing - check out other hover effects.

        
            
        <video src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" loop class="hover-to-play w-100">
        </video>
        
        
    
        
            
        const clip = document.querySelectorAll(".hover-to-play");
        for (let i = 0; i < clip.length; i++) { clip[i].addEventListener("mouseenter", function (e) { clip[i].play();
          }); clip[i].addEventListener("mouseout", function (e) { clip[i].pause(); }); }