Component Testing

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

YouTube - Two-Click (Standard)

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

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

YouTube - One-Click (Recommended UX)

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

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

YouTube - Instant Autoplay (Hero Video Pattern)

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

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

YouTube vs Vimeo - Same Configuration

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

YouTube with Privacy Mode (Default)

{ "privacy_mode": true }

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

Vimeo with DNT (Do Not Track)

{ "privacy_mode": true }

Enables Vimeo’s Do Not Track option.

16:9 Widescreen (Default)

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

Standard widescreen format.

1:1 Square

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

Social media video style.

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.

6:5 Promo

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

Taller format for promotional content.

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.

Without Overlay (Clean)

{ "overlay_title": "" }

No overlay elements, just poster + play button.

Start Time

{ "start_time": 10 }

Starts video at 0:10.

Loop

{ "loop": true }

Video restarts automatically.

No Controls (Uncommon)

{ "show_controls": false }

Hides native player controls.

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.

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