Video Player

A styled wrapper for HTML5 video, YouTube, and Vimeo content.

Examples

Native Video

Standard HTML5 video with custom play button overlay.

blade

<div class="w-full max-w-2xl">
    <x-plume::video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        poster="https://interactive-examples.mdn.mozilla.net/media/cc0-images/flower.jpg" />
</div>

YouTube Embed

Automatically detects YouTube URLs.

blade

<div class="w-full max-w-2xl">
    <x-plume::video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
</div>

Vimeo Embed

Automatically detects Vimeo URLs.

blade

<div class="w-full max-w-2xl">
    <x-plume::video src="https://vimeo.com/76979871" />
</div>

Prop	Type	Default	Description
src	string	null	Video URL (Direct file, YouTube, or Vimeo).
poster	string	null	Poster image URL for native videos.
autoplay	bool	false	Whether to start playing automatically.
controls	bool	true	Whether to show native player controls.
loop	bool	false	Whether to restart automatically after ending.
muted	bool	false	Whether to start with audio disabled.
aspect	string	'video'	Aspect ratio: 'square' (1:1), 'video' (16:9), 'standard' (4:3), 'portrait' (3:4), 'cinema' (21:9), 'vertical' (9:16). Supports both '4/3' and '4:3' notations.
onPlay	string	null	AlpineJS expression or function to call when playback starts.
onPause	string	null	AlpineJS expression or function to call when playback pauses.
onEnded	string	null	AlpineJS expression or function to call when playback ends.

Usage

blade

<x-plume::video src="video.mp4" poster="thumb.jpg" />
<x-plume::video src="https://www.youtube.com/watch?v=..." />