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 string | default: youtube

id string

title string

source string

thumbnail string

Examples

Video Types

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

<Video source="/videos/component-docs/glass.mp4" thumbnail="/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: /images/component-docs/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: ''
---