video.mdx

title	description	navigation	github	prev	next
Tailwind CSS Video for React - Material Tailwind	Customise your web projects with our easy-to-use video examples for Tailwind CSS and React using Material Design guidelines.	video autoplay-video muted-video	video	img	sidebar

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

<CodePreview component={<VideoExamples.DefaultVideo />}>

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

<CodePreview component={<VideoExamples.AutoplayVideo />}>

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

<CodePreview component={<VideoExamples.MutedVideo />}>

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>
  );
}