Tailwind CSS Video - React

Use our React and Tailwind CSS video example to display 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.

Video Demo

Here's how to implement a simple and responsive video. It can be used to display video content on your website.

"use client";

export function VideoDemo() {
  return (
    <video className="h-full w-full rounded-lg" controls>
      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
"use client";

export function VideoDemo() {
  return (
    <video className="h-full w-full rounded-lg" controls>
      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}

Video Autoplay

You can use the autoPlay attribute to make the video play automatically when the page loads.

"use client";

export function VideoAutoplay() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay>
      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
"use client";

export function VideoAutoplay() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay>
      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}

Video Muted

You can use the muted attribute to mute the video.

"use client";

export function VideoMuted() {
  return (
    <video className="h-full w-full rounded-lg" controls muted>
      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
"use client";

export function VideoMuted() {
  return (
    <video className="h-full w-full rounded-lg" controls muted>
      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}