Components
Video
A styled HTML5 video player with a custom poster and play overlay.
php artisan blatui:add video
<x-ui.video
class="w-full max-w-2xl"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
poster="https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=1600&q=80"
/>API Reference
Props, slots and exposed methods for
<x-ui.video>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src |
string
|
— | Video file URL. Alternatively pass your own <source>/<track> elements through the slot. |
poster |
string
|
— | Image shown before playback begins, behind the play overlay. |
aspect |
string
|
'video'
|
Aspect ratio of the frame: "video" is 16/9 and "square" is 1/1. Any other value is treated as a custom CSS ratio such as "4/3".
video
square
|
controls |
bool
|
true
|
Show the browser's native video controls, revealed once playback starts. |
autoplay |
bool
|
false
|
Start playing on load. When on, the poster play overlay is omitted. |
loop |
bool
|
false
|
Restart the video automatically when it reaches the end. |
muted |
bool
|
false
|
Start with audio muted (commonly required alongside autoplay). |
rounded |
string
|
'rounded-xl'
|
Tailwind corner-rounding utility applied to the video frame. |
Slots
| Slot | Description |
|---|---|
default |
Optional <source> and <track> elements placed inside the <video>, used instead of (or in addition to) the src prop. |