Back to site

Video Modal

Dialog overlay with an embedded video that autoplays on open and pauses on close.

---
import VideoModal from "@wrappers/video-modal/VideoModal.astro";
---

<VideoModal label="Astro in 100 Seconds" size="lg" title="Astro in 100 Seconds" triggerIconName="play-circle" triggerSize="md" triggerText="Watch video" triggerVariant="primary" type="youtube" videoId="ZoXyK96nyCg" />
---
blocks:
  _component: building-blocks/wrappers/video-modal
  label: Astro in 100 Seconds
  type: youtube
  videoId: ZoXyK96nyCg
  title: Astro in 100 Seconds
  triggerText: Watch video
  triggerVariant: primary
  triggerSize: md
  triggerIconName: play-circle
  size: lg
---

Overview #

A dialog overlay containing an embedded video that autoplays when opened and pauses when closed. Supports YouTube, Vimeo, and local video sources. Any Button or Card on the page can also open a video modal by setting its link to ^modal-{label}, where {label} is the slugified modal label (e.g. ^modal-my-video).

Properties #

label string

Accessible label for the video modal dialog.

type enum | default: youtube

Video source type.

Accepted values:
  • youtube
  • vimeo
  • local-source

videoId string

Used for externally hosted videos — enter the YouTube or Vimeo video ID.

title string

Video title for accessibility and display.

source string

Used for locally hosted videos — select a video file.

triggerText string | default: Watch video

Text displayed on the button that opens the video modal.

triggerVariant enum | default: primary

Visual style of the trigger button.

Accepted values:
  • primary
  • secondary
  • tertiary
  • ghost
  • text

triggerSize enum | default: md

Size of the trigger button.

Accepted values:
  • sm
  • md
  • lg

triggerIconName enum | default: play-circle

Optional icon for the trigger button. Sourced from [Heroicons](https://heroicons.com/).

size enum | default: lg

Maximum width of the video modal.

Accepted values:
  • sm
  • md
  • lg
  • xl

Examples #

Sizes # 

---
import VideoModal from "@wrappers/video-modal/VideoModal.astro";
---

<VideoModal label="Live visual editing" size="md" title="Live visual editing in Astro with CloudCannon" triggerIconName="play-circle" triggerSize="md" triggerText="Medium modal" triggerVariant="secondary" type="youtube" videoId="4mB5KwenCzI" />
---
blocks:
  _component: building-blocks/wrappers/video-modal
  label: Live visual editing
  type: youtube
  videoId: 4mB5KwenCzI
  title: Live visual editing in Astro with CloudCannon
  triggerText: Medium modal
  triggerVariant: secondary
  triggerSize: md
  triggerIconName: play-circle
  size: md
---
---
import VideoModal from "@wrappers/video-modal/VideoModal.astro";
---

<VideoModal label="Dunedin Tourism" size="xl" title="Dunedin Tourism" triggerIconName="play-circle" triggerSize="md" triggerText="Extra large modal" triggerVariant="secondary" type="vimeo" videoId="129371220" />
---
blocks:
  _component: building-blocks/wrappers/video-modal
  label: Dunedin Tourism
  type: vimeo
  videoId: '129371220'
  title: Dunedin Tourism
  triggerText: Extra large modal
  triggerVariant: secondary
  triggerSize: md
  triggerIconName: play-circle
  size: xl
---