majiayu000 YouTube Embed Skill
Purpose
Embed YouTube videos without loading YouTube scripts until user clicks. Massive performance win.
Core Rules
- Facade pattern — Poster + play button, no iframe until click
- Local posters — Download and optimize thumbnails locally
- Privacy-enhanced — Use
youtube-nocookie.comonly - Track engagement — GA4
video_playevent on click - Schema.org — VideoObject markup for rich snippets
Flow
Click before: Poster image + Play button (no YouTube)
Click after: Replace with iframe + GA4 event + autoplay
Poster Images
- Download:
https://i.ytimg.com/vi/{VIDEO_ID}/maxresdefault.jpg - Fallback:
sddefault.jpgif maxres unavailable - Convert: Use Picture skill (avif, webp, jpg)
- Store:
src/assets/videos/{slug}.jpg
References
- Component — Full VideoFacade.astro code
- Schema — VideoObject markup
Forbidden
- ❌ YouTube iframe/script before click
- ❌
youtube.com(must useyoutube-nocookie.com) - ❌
fetchpriority="high"on video facades - ❌ YouTube logo as play button (trademark)
- ❌ Remote poster images (always local)
- ❌ Missing poster or title
Definition of Done
- VideoFacade component created
- Poster images downloaded and optimized
- Click triggers iframe swap + autoplay
- GA4 video_play event firing
- VideoObject schema on pages with videos
- Keyboard accessible (Enter/Space)