nuxt-x-marketing
ModalVideo
Video modal supporting YouTube, Vimeo, and direct video URLs with optional thumbnail trigger, autoplay, and captions.
ModalVideo
Opens a video in a modal. Supports YouTube, Vimeo, and direct video URLs — the embed type is detected automatically. Supply a thumbnail prop to show an image with a play button as the trigger, or place a custom trigger in the default slot. On close, direct <video> elements are paused automatically.
Components
<XMarkModalVideo />
<!-- YouTube with thumbnail trigger -->
<XMarkModalVideo
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
thumbnail="/images/video-thumb.jpg"
title="Product Demo"
description="See how it works in 3 minutes"
:autoplay="true"
size="5xl"
/>
<!-- Button trigger -->
<XMarkModalVideo src="https://vimeo.com/123456789">
<UButton label="Watch Demo" leading-icon="i-lucide-play" />
</XMarkModalVideo>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | YouTube example URL | Video URL — YouTube (youtube.com/watch?v=, youtu.be/, embed/), Vimeo (vimeo.com/), or direct .mp4. |
thumbnail | string | '' | Thumbnail image URL — renders as a play-button trigger when set. |
poster | string | '' | Poster image for direct video files (ignored for YouTube/Vimeo embeds). |
title | string | '' | Title shown in modal footer. |
description | string | '' | Description shown in modal footer. |
size | string | '4xl' | Modal size: 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'. |
autoplay | boolean | true | Autoplay video when modal opens. Forwarded as autoplay=1 param to embeds. |
button | object | {} | Default trigger button config { label?, color?, variant?, size?, icon? }. Falls back to a primary "Watch Video" button with i-lucide-play icon. |
captions | string | '' | Captions/subtitles file URL (direct video only). |
captionsLang | string | 'en' | Captions language code (srclang attribute). |
captionsLabel | string | 'English' | Captions track label. |
Emits
| Event | Description |
|---|---|
open | Modal opened. |
close | Modal closed (direct videos are paused before this fires). |
AI Context
category: Modal
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkModalVideo
use-when: >
Embedding a video demo or explainer that plays in a modal without
navigating away from the page. Auto-detects YouTube, Vimeo, and direct
video URLs. Supports captions for direct video files.
typical-page-section: Triggered from hero section, features section, or any demo CTA button.