Tailwind CSS Video - React

Use our Tailwind CSS video example to video in your web projects. The video can be used to display media content specially videos on your website.

See below our beautiful video examples that you can use in your Tailwind CSS and React project. The examples also comes in different styles so you can adapt it easily to your needs.

export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}

Autoplay Video

export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}

Muted Video

export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay muted>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}

Explore More Tailwind CSS Examples

Check out more video component examples from Material Tailwind Blocks.