Video

React Bootstrap Video - free examples, templates & tutorial

Responsive React 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. 

        
            

          import { MDBContainer } from "mdb-react-ui-kit";
          import React from "react";
          
          export default function App() {
            return (
              <MDBContainer>
                <div className="ratio ratio-16x9">
                  <iframe
                    src="https://www.youtube.com/embed/vlDzYIIOYmM"
                    title="YouTube video"
                    allowfullscreen
                  ></iframe>
                </div>
              </MDBContainer>
            );
          }

Vimeo iFrame

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

        
            

          import { MDBContainer } from "mdb-react-ui-kit";
          import React from "react";
          
          export default function App() {
            return (
              <MDBContainer>
                <div className="ratio ratio-16x9">
                  <iframe
                    src="https://player.vimeo.com/video/137857207"
                    title="Vimeo video"
                    allowfullscreen
                  ></iframe>
                </div>
              </MDBContainer>
            );
          }

Responsive mp4 file

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

        
            

          import React from "react";

          export default function App() {
            return (
              <video className="w-100" autoPlay loop muted>
                <source
                  src="https://mdbootstrap.com/img/video/animation-intro.mp4"
                  type="video/mp4"
                  allowFullScreen
                />
              </video>
            );
          }

Hover to play

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

        
            
        import React, { useCallback, useRef } from "react";
        import { MDBContainer } from "mdb-react-ui-kit";
        
        export default function App() {
          const videoRef = useRef(null);
        
          const handleMouseEnter = useCallback(() => {
            videoRef.current.play();
          }, []);
        
          const handleMouseLeave = useCallback(() => {
            videoRef.current.pause();
          }, []);
        
          return (
            <MDBContainer>
              <video
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                ref={videoRef}
                src="https://mdbcdn.b-cdn.net/img/video/forest.mp4"
                type="video/mp4"
                loop
                className="w-100"
              ></video>
            </MDBContainer>
          );
        }

Full page video background

An example of full-page usage of the video with text overlay.

Click on the image to see live demo.

MDB 5 - Bootstrap 5 & Material Design