Back to site

Video

Video component for YouTube, Vimeo, and HTML5 sources.

---
import Video from "@core-elements/video/Video.astro";
---

<Video source="" thumbnail="" title="Astro in 100 Seconds" type="youtube" videoId="ZoXyK96nyCg" />
---
blocks:
  - _component: building-blocks/core-elements/video
    type: youtube
    videoId: ZoXyK96nyCg
    title: Astro in 100 Seconds
    source: ''
    thumbnail: ''
---

Overview #

A video component for embedding YouTube, Vimeo, or HTML5 content. Optimizes performance by loading YouTube and Vimeo players only on interaction instead of pageload. Supports custom aspect ratios, preview images, and titles.

Properties #

type enum | default: youtube

Accepted values:
  • youtube
  • vimeo
  • local-source

videoId string

Used for externally hosted videos - Enter the YouTube or Vimeo video ID.

title string

Used for externally hosted videos - The video title provides accessibility information for assistive technologies (like screen readers) and can display a tooltip when a user hovers over the video.

source string

Used for locally hosted videos - Select a video file; matching sibling formats with the same filename are added as additional sources automatically.

thumbnail string

Poster image before the video plays. Use /src/assets/images/... like the Image component (optimized at build time), or a public or absolute URL.

Examples #

Video Types # 

---
import Video from "@core-elements/video/Video.astro";
---

<Video source="/videos/component-docs/glass.mp4" thumbnail="/src/assets/images/component-docs/video-placeholder.jpg" title="Glass Pour" type="local-source" />
---
blocks:
  - _component: building-blocks/core-elements/video
    type: local-source
    title: Glass Pour
    source: /videos/component-docs/glass.mp4
    thumbnail: /src/assets/images/component-docs/video-placeholder.jpg
---
---
import Video from "@core-elements/video/Video.astro";
---

<Video source="" thumbnail="" title="Live visual editing in Astro with CloudCannon" type="youtube" videoId="4mB5KwenCzI" />
---
blocks:
  - _component: building-blocks/core-elements/video
    type: youtube
    videoId: 4mB5KwenCzI
    title: Live visual editing in Astro with CloudCannon
    source: ''
    thumbnail: ''
---
---
import Video from "@core-elements/video/Video.astro";
---

<Video source="" thumbnail="" title="Dunedin Tourism" type="vimeo" videoId="129371220" />
---
blocks:
  - _component: building-blocks/core-elements/video
    type: vimeo
    videoId: '129371220'
    title: Dunedin Tourism
    source: ''
    thumbnail: ''
---