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' />

Props #

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

  • Use the class prop to overwrite the video tag class.
Name Type Default
src string
type string 'video/mp4'
trackSrc string ''
srclang string 'en'
label string 'english_captions'

References #

Typography