---
layout: docs
title: Tailwind CSS Video - Flowbite
description: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS
group: components
toc: true
previous: QR Code
previousLink: components/qr-code/
next: Input field
nextLink: forms/input-field/
---
Get started with the video component to embed internal video source into a native HTML 5 video player and set custom options such as autoplay or muted to enhance the user experience.
## Video player
Use this example to create a native browser video player and apply the `w-full` utility class from Tailwind CSS to span the full width of the parent container.
{{< example github="typography/video.md" show_dark=true >}}
<video class="w-full rounded-base" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}
## Autoplay
Use the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.
{{< example github="typography/video.md" show_dark=true >}}
<video class="w-full rounded-base" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}
## Muted
Use the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.
{{< example github="typography/video.md" show_dark=true >}}
<video class="w-full rounded-base" autoplay muted controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}
## Sizes
Set the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS.
### Width
Use the `w-{size}` class to set the width of the video component.
{{< example github="typography/video.md" show_dark=true >}}
<video class="w-96 rounded-base" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}
### Height
Use the `h-{size}` class to set the height of the video player.
{{< example github="typography/video.md" show_dark=true >}}
<video class="h-80 rounded-base" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}
### Responsive
Use the following example to make the video responsive across all devices and viewports.
{{< example github="typography/video.md" show_dark=true >}}
<video class="w-full h-auto max-w-full rounded-base" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}
## Custom styles
Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.
{{< example github="typography/video.md" show_dark=true >}}
<video class="w-full h-auto max-w-full border border-default rounded-base" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
{{< /example >}}