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