Agent-Skills.md

Agent Skills: YouTube Embed Skill

YouTube video facade pattern for performance. Lazy-load iframe on click, poster images, GA4 tracking, Schema.org markup.

UncategorizedID: Soborbo/claudeskills/youtube-embed

Repository

Soborbo/claudeskills
Soborbo
2

Install this agent skill to your local

pnpm dlx add-skill https://github.com/Soborbo/claudeskills/tree/HEAD/youtube-embed

Skill Files

Browse the full folder contents for youtube-embed.

Download Skill

Loading file tree…

youtube-embed/SKILL.md

Skill Metadata

Name
youtube-embed
Description
YouTube video facade pattern for performance. Lazy-load iframe on click, poster images, GA4 tracking, Schema.org markup.

YouTube Embed Skill

Purpose

Embed YouTube videos without loading YouTube scripts until user clicks. Massive performance win.

Core Rules

  1. Facade pattern — Poster + play button, no iframe until click
  2. Local posters — Download and optimize thumbnails locally
  3. Privacy-enhanced — Use youtube-nocookie.com only
  4. Track engagement — GA4 video_play event on click
  5. 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

  1. Download: https://i.ytimg.com/vi/{VIDEO_ID}/maxresdefault.jpg
  2. Fallback: sddefault.jpg if maxres unavailable
  3. Convert: Use Picture skill (avif, webp, jpg)
  4. Store: src/assets/videos/{slug}.jpg

References

Forbidden

  • ❌ YouTube iframe/script before click
  • ❌ youtube.com (must use youtube-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)