Back to site

Video

Video component for YouTube, Vimeo, and HTML5 sources.

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

<Video id="dsTXcSeAZq8" source="" thumbnail="" title="Astro in 100 Seconds" type="youtube" />
---
blocks:
  - _component: building-blocks/core-elements/video
    type: youtube
    id: dsTXcSeAZq8
    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

id string

Used for externally hosted videos - Enter the YouTube or Vimeo 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 - Must be mp4 as this is supported by all modern browsers.

thumbnail string

Used for locally hosted videos - The image displayed before the video plays or while it is loading.

Examples

Video Types

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

<Video source="/videos/component-library/glass.mp4" thumbnail="/images/component-library/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-library/glass.mp4
    thumbnail: /images/component-library/video-placeholder.jpg
---
---
import Video from "@core-elements/video/Video.astro";
---

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

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