Video Block
Responsive video component with support for native HTML5 video, YouTube embeds, and Vimeo embeds. Includes Schema.org VideoObject markup for SEO.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Direct video URL (for native HTML5) |
youtubeId | string | - | YouTube video ID |
vimeoId | string | - | Vimeo video ID |
title | string | - | Video title (required) |
description | string | - | Video description |
poster | string | - | Thumbnail image URL |
aspectRatio | "16/9" | "4/3" | "1/1" | "16/9" | Video aspect ratio |
controls | boolean | true | Show video controls |
autoplay | boolean | false | Autoplay video |
loop | boolean | false | Loop video |
muted | boolean | false | Mute video |
showSchema | boolean | true | Include Schema.org markup |
uploadDate | string | - | Upload date (ISO 8601 format) |
class | string | "" | Additional CSS classes |
Native HTML5 Video
Self-hosted video with native HTML5 video player. Supports poster image and standard video controls.
YouTube Embed
Privacy-enhanced YouTube embed using youtube-nocookie.com domain. Automatically handles responsive sizing.
Vimeo Embed
Vimeo video embed with responsive iframe. Clean, professional video hosting.
Aspect Ratios
Support for different aspect ratios: 16:9 (widescreen), 4:3 (standard), and 1:1 (square).
16:9 (Widescreen)
4:3 (Standard)
1:1 (Square)
Usage Notes
- YouTube: Uses privacy-enhanced embed (youtube-nocookie.com) for better privacy
- Native Video: Supports all HTML5 video attributes (controls, autoplay, loop, muted)
- Schema.org: Includes VideoObject markup for improved SEO (title, description, thumbnail, uploadDate)
- Responsive: CSS aspect-ratio ensures proper scaling on all devices
- Lazy Loading: Native videos use preload="metadata" for performance