nuxt-x-affiliate
Video Modal
Click-to-play video in a modal — thumbnail with a play button that opens the video full-size.
Video Modal
A thumbnail with a play button that opens the video full-size in a modal.
Built on top of <XAFVideoEmbed>, so it inherits its YouTube/Vimeo/direct URL
handling, the youtube-nocookie host, and VideoObject structured data. This
component contributes the thumbnail trigger and the modal.
The embed is only mounted while the modal is open, so the iframe and everything the video host loads with it stay off the page until the visitor asks to watch.
Components
<XAFVideoModal />
<XAFVideoModal
src="https://www.youtube.com/watch?v=xxxxxxxxxxx"
title="How we test cordless drills"
thumbnail="/covers/how-we-test.webp"
description="A walkthrough of the testing bench."
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | YouTube, Vimeo, or direct video URL |
title | string | required | Accessible title for the video |
thumbnail | string | — | Preview image. Without one, only a button renders |
thumbnailAlt | string | title | Alt text for the thumbnail |
description | string | — | Caption under the modal video |
button | { label?, icon?, color?, variant?, size? } | {} | Trigger button, when there is no thumbnail |
autoplay | boolean | true | Autoplay (muted) once the modal opens |
aspectRatio | string | '16/9' | Thumbnail and video aspect ratio |
Events
| Event | Payload | Description |
|---|---|---|
open | — | Modal opened |
close | — | Modal closed |
Tips
- Use
<XAFVideoEmbed>directly for a video that should play inline in the article body. Use this when the video is supporting material and the iframe cost is not worth paying on page load.
AI Context
component: XAFVideoModal
package: "@xenterprises/nuxt-x-affiliate"
use-when: Click-to-play video behind a thumbnail, in a modal