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 #

  • Svelte
<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.

  • Svelte
<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.

  • Svelte
<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.

  • Svelte
<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.

  • Svelte
<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.

  • Svelte
<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.

  • Svelte
<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.

  • Svelte
<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" />

Component data #

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

Video styling #

  • Use the class prop to overwrite the video tag class.

References #

Typography