Videos

Component Testing

This page demonstrates all video-embed configurations and behaviors. Each example shows the exact Storyblok field configuration used.

Click Behavior & Audio Policy

YouTube - Two-Click (Standard)

{ "lazy": true, "autoplay": false }

Click facade → load player → click play. Default behavior.

Two-click: Click facade to load, then click play

YouTube - One-Click (Recommended UX)

{ "lazy": true, "autoplay": true }

Click facade → load + auto-play with sound. User interaction allows audio.

One-click: Click facade to load and play immediately

YouTube - Instant Autoplay (Hero Video Pattern)

{ "lazy": false, "autoplay": true, "muted": true }

Loads on page load, autoplays muted (browser requirement). ~500KB+ page weight impact.

Zero-click: Loads and plays on page load (muted)

Provider Comparison

YouTube vs Vimeo - Same Configuration

Both use lazy: true + autoplay: true for one-click playback.

YouTube - One-click playback

Vimeo - One-click playback

Privacy Mode

YouTube with Privacy Mode (Default)

{ "privacy_mode": true }

Uses youtube-nocookie.com domain. No cookies until playback starts.

Privacy mode enabled (youtube-nocookie.com)

Vimeo with DNT (Do Not Track)

{ "privacy_mode": true }

Enables Vimeo’s Do Not Track option.

Vimeo with DNT enabled

Aspect Ratios

16:9 Widescreen (Default)

{ "desktop_aspect_ratio": "16-9", "mobile_aspect_ratio": "16-9" }

Standard widescreen format.

16:9 aspect ratio (desktop + mobile)

1:1 Square

{ "desktop_aspect_ratio": "1-1", "mobile_aspect_ratio": "1-1" }

Social media video style.

1:1 square aspect ratio

9:16 Portrait Mobile, 16:9 Desktop (Responsive)

{ "desktop_aspect_ratio": "16-9", "mobile_aspect_ratio": "9-16" }

Vertical video on mobile, widescreen on desktop. Resize browser to see change.

Responsive: 9:16 mobile / 16:9 desktop

6:5 Promo

{ "desktop_aspect_ratio": "6-5", "mobile_aspect_ratio": "6-5" }

Taller format for promotional content.

6:5 promo aspect ratio

Overlay Treatment

Full Overlay with CTA

{
  "overlay_title": "Featured Video",
  "chip": "New",
  "overlay_text": "Watch our latest feature demo...",
  "button": [{ "component": "link", "label": "Learn More" }]
}

Gradient scrim + content over poster.

With overlay: chip + title + text + CTA

Without Overlay (Clean)

{ "overlay_title": "" }

No overlay elements, just poster + play button.

Without overlay: clean poster + play button

Special Behaviors

Start Time

{ "start_time": 10 }

Starts video at 0:10.

Starts at 0:10

Loop

{ "loop": true }

Video restarts automatically.

Looping enabled

No Controls (Uncommon)

{ "show_controls": false }

Hides native player controls.

Controls hidden

HTML5 Self-Hosted Video

Local Video File

{
  "video_file": { "filename": "https://example.com/video.mp4" },
  "poster": { "filename": "https://example.com/poster.jpg" }
}

Uses native <video> element with custom poster.

Note: Replace with actual video file URL to test.

HTML5 video with custom poster

Summary

Key Takeaways

  1. Best UX: lazy: true + autoplay: true = one-click playback with sound
  2. Best Performance: lazy: true saves ~500KB+ per video on page load
  3. Hero Videos: lazy: false + autoplay: true + muted: true for instant autoplay
  4. Privacy: privacy_mode: true (default) uses no-cookie domains
  5. Responsive: Mix desktop/mobile aspect ratios (e.g., 16:9 desktop / 9:16 mobile)
  6. Overlay: Set overlay_title to enable promo treatment

Add a Card