Video

The video component uses the HTML5 video element to embed video content in your application. It supports various attributes and events to control playback and enhance user experience.

Basic example

Use the <video> element to embed video content in an application. The w-full class ensures the video takes up the full width of its container.

HTML

<video controls class="w-full">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Autoplay

To make a video play automatically when the page loads, use the autoplay attribute. Note that some browsers may require the video to be muted for autoplay to work.

HTML

<video controls autoplay class="w-full">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Muted

To mute a video by default, use the muted attribute.

HTML

<video controls muted class="w-full">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Loop

To make a video loop continuously, use the loop attribute.

HTML

<video controls loop class="w-full">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Size

Adjust the size of the video using Tailwind CSS width and height utility classes.

HTML

<video controls class="w-80 h-60 object-cover">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Aspect ratio

Use Tailwind’s aspect-* utilities to maintain a consistent video aspect ratio regardless of screen size.

HTML

<video controls class="aspect-video object-cover">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Custom aspect ratio

Use arbitrary values to define custom aspect ratios, such as 4:3 or 3:2.

HTML

<video controls class="aspect-4/3 object-cover">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Custom styles

Apply custom styles to the video element using Tailwind CSS classes.

HTML

<video controls class="w-full max-w-150 rounded-lg border border-base">
  <source src="/videos/hummingbird.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
Previous

Images
Next

Shadows