nuxt-x-marketing
ModalVideo
Video modal supporting YouTube, Vimeo, and direct video URLs with optional thumbnail trigger and autoplay.
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.
Components
<XMarkModalVideo />
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.
<!-- 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 | Video URL (YouTube, Vimeo, or direct .mp4) |
thumbnail | String | '' | Thumbnail image URL — renders as play-button trigger |
poster | String | '' | Poster image for direct video files |
title | String | '' | Title shown in modal footer |
description | String | '' | Description shown in modal footer |
size | String | '4xl' | Modal size |
autoplay | Boolean | true | Autoplay video when modal opens |
button | Object | {} | Default trigger button config { label, color?, variant?, icon?, size? } |
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.
typical-page-section: Triggered from hero section, features section, or any demo CTA button.