youtube-embed

Name: youtube-embed
Availability: InStock
Author: soborbo

Lazy-loads YouTube videos via poster and button facade with iframe on click.

4|1|Updated Dec 21, 2025

Search Tags:#poster #schema #GA4 #lazy-loading #youtube-nocookie #video-facade

Ready to run

npx skills add https://github.com/Soborbo/claudeskills --skill youtube-embed

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: youtube-embed
Source: https://github.com/Soborbo/claudeskills/tree/main/youtube-embed
Command: npx skills add https://github.com/Soborbo/claudeskills --skill youtube-embed

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables lazy-loading YouTube videos by swapping a poster and play button for an iframe only after user interaction.

Core Features & Use Cases

Facade pattern: Poster + play button, no iframe until click.
Privacy-first: Uses youtube-nocookie.com to protect viewer data.
Engagement tracking: GA4 video_play event fired on click.
Schema markup: VideoObject embedding for rich results.
Use cases include marketing landing pages, product demos, and content hubs where performance matters.

Quick Start

Import VideoFacade in your Astro project and supply a videoId, title, and a local poster asset.
Place the component in your page where the video should appear.
On user click, the poster is replaced with an autoplaying iframe, a GA4 event is sent, and a VideoObject schema is added to the page.

Frequently Asked Questions about youtube-embed

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I lazy-load YouTube videos using a facade pattern?▼

To lazy-load YouTube videos, swap a poster image and play button for the iframe only after user interaction. This delays the heavy iframe payload until a click occurs, maximizing page performance and initial load speed.

What is the best way to track YouTube video plays in GA4?▼

Tracking YouTube video plays in GA4 involves firing a video_play event when the user clicks the video facade. The iframe replacement triggers this event automatically, capturing engagement data without requiring extra playback listeners.

How do I add VideoObject schema markup to embedded YouTube videos?▼

Adding VideoObject schema to embedded YouTube videos requires attaching structured data to the video facade component. This markup enables rich search results by exposing video metadata to search engines when the poster and button render on the page.

Does youtube-nocookie.com improve privacy for embedded YouTube videos?▼

Using youtube-nocookie.com improves privacy for embedded YouTube videos by preventing the platform from tracking viewer data through cookies until the video is explicitly played. It serves the video content without invasive tracking pixels.

Can I use a video facade pattern for marketing landing pages?▼

You can use a video facade pattern for marketing landing pages, product demos, and content hubs where performance matters. It replaces heavy video embeds with a lightweight poster and play button to maintain fast loading times.

Why does my YouTube iframe slow down page performance?▼

Your YouTube iframe slows down page performance because it loads heavy scripts and resources immediately upon page render. Implementing a lazy-loading facade pattern defers this iframe payload until the user clicks play.