Video - Laravel Blade

Use the video component to embed native HTML5 video players with controls, autoplay, muted options, and various sizing configurations.

Video Player

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" :controls="true" />

Autoplay

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" :autoplay="true" :controls="true" />

Muted

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" :autoplay="true" :muted="true" :controls="true" />

Width Sizing

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" size="w-96" :controls="true" />

Height Sizing

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" size="h-80" :controls="true" />

Responsive

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" size="responsive" :controls="true" />

Custom Styles

Blade code

<x-fwb.video src="https://flowbite.com/docs/videos/flowbite.mp4" size="responsive" :controls="true" class="border border-gray-200 rounded-lg dark:border-gray-700 shadow-lg" />

Component Properties

Video x-fwb.video

Prop Type Default Description
src string '' The URL of the video file to embed.
autoplay bool false Automatically start playing the video when the page loads.
muted bool false Start the video with the sound muted.
controls bool true Show native video player controls (play, pause, volume, etc.).
size string full Size preset for the video player. Options: full, sm, md, lg, xl, w-96, h-80, responsive.