Svelte Video - Flowbite

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