Svelte Video - Flowbite

Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS

Setup #

<script>
  import { Video } from 'flowbite-svelte';
</script>

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.

<Video src='/videos/flowbite.mp4' controls trackSrc='flowbite.mp4' />

Autoplay #

Use the autoplay attribute on the video component to automatically start the video when the page has been loaded.

<Video src='/videos/flowbite.mp4' autoplay controls trackSrc='flowbite.mp4' />

Muted #

Use the muted attribute together with the autoplay option to start the video while the sound is muted.

<Video src='/videos/flowbite.mp4' autoplay muted controls trackSrc='flowbite.mp4' />

Sizes #

Set the width and height of the video component using the w-{size} and h-{size} classes.

Width

Use the w-{size} class to set the height of the video player.

<Video src='/videos/flowbite.mp4' controls class='w-96' trackSrc='flowbite.mp4' />

Height

Use the h-{size} class to set the height of the video player.

<Video src='/videos/flowbite.mp4' controls class='h-80' trackSrc='flowbite.mp4' />

Responsive

Use the following example to make the video responsive across all devices and viewports.

<Video src='/videos/flowbite.mp4' controls class='w-full max-w-full h-auto' trackSrc='flowbite.mp4' />

Custom styles

Customize the video player appearance using the utility classes from Tailwind CSS such as rounded-{size} or border to set rounded corners and border.

<Video src='/videos/flowbite.mp4' controls class='w-full max-w-full h-auto rounded-lg border border-gray-200 dark:border-gray-700' trackSrc='flowbite.mp4' />

Props #

The component has the following props, type, and default values. See types page for type information.

References #

Flowbite Tooltip