Skip to main content

​
Overview

The YouTubePlayer component embeds YouTube videos with privacy-first design. It wraps the PrivacyEmbed component to provide a consent-based loading mechanism that prevents cookies and tracking until the user explicitly chooses to load the video.

​
Props

​
videoId
string
required
The YouTube video ID (the alphanumeric string after v= in YouTube URLs)
​
title
string
required
Descriptive title for the video, used for accessibility and the load button
​
loading
'lazy' | 'eager'
default:"eager"
Controls loading behavior (primarily affects the poster image)

​
Features

​
Privacy-First Design

The component automatically uses youtube-nocookie.com domain for enhanced privacy, which:
  • Prevents YouTube from setting cookies until the video is played
  • Reduces tracking and data collection
  • Complies with stricter privacy regulations (GDPR, CCPA)
Videos display a poster image with a “Load Content” button instead of auto-embedding:
  • No iframe is loaded until user interaction
  • No external requests made on page load
  • User explicitly consents to loading YouTube content

​
Automatic Poster Images

The component automatically fetches the maximum resolution thumbnail from YouTube: 
https://i.ytimg.com/vi/{videoId}/maxresdefault.jpg

​
Usage Examples

​
Basic Video Embed

---
import YouTubePlayer from '@/components/YouTubePlayer.astro';
---

<YouTubePlayer 
  videoId="dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
/>

​
Extract Video ID from URL

---
const videoUrl = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
const videoId = new URL(videoUrl).searchParams.get('v');
---

<YouTubePlayer 
  videoId={videoId}
  title="My Video Title"
/>

​
Multiple Videos in Grid

<div class="grid gap-6 md:grid-cols-2">
  <YouTubePlayer 
    videoId="dQw4w9WgXcQ"
    title="Video 1"
  />
  
  <YouTubePlayer 
    videoId="jNQXAC9IVRw"
    title="Video 2"
  />
  
  <YouTubePlayer 
    videoId="9bZkp7q19f0"
    title="Video 3"
  />
  
  <YouTubePlayer 
    videoId="kJQP7kiw5Fk"
    title="Video 4"
  />
</div>

​
How It Works

​
1. Initial Render

On page load, the component displays:
  • Video poster image (thumbnail from YouTube)
  • Play button overlay
  • “Load Content” text
  • No iframe or external scripts

​
2. User Interaction

When the user clicks the play button:
  1. An iframe is dynamically created
  2. The iframe source is set to youtube-nocookie.com
  3. The facade (poster + button) is hidden
  4. The video player becomes interactive

​
3. Video Playback

The embedded player includes standard YouTube features:
  • Full screen support
  • Playback controls
  • Quality selection
  • Captions (if available)

​
Privacy Benefits

Using youtube-nocookie.com significantly reduces privacy concerns by preventing YouTube from tracking users across sites until they explicitly choose to watch the video.

​
Privacy Comparison

FeatureStandard EmbedYouTubePlayer
Cookies on page loadYesNo
External requests on loadMultipleOne (poster image only)
User trackingImmediateOnly after consent
GDPR compliantRequires bannerBuilt-in consent

​
Styling

The component includes default styling:
  • aspect-video: Maintains 16:9 aspect ratio
  • h-auto: Responsive height
  • min-h-100: Minimum height constraint
  • w-full: Full width of container
  • rounded-lg: Rounded corners
Customize by wrapping in a container: 
<div class="max-w-3xl mx-auto my-8">
  <YouTubePlayer 
    videoId="dQw4w9WgXcQ"
    title="My Video"
  />
</div>

​
Accessibility

  • Semantic <button> element for interaction
  • Descriptive aria-label on load button
  • Proper title attribute on iframe
  • Keyboard accessible (click handler works with Enter/Space)

​
Performance

While the poster image loads immediately, the full YouTube player (with all its scripts and resources) only loads on user interaction, significantly improving initial page load performance.

​
Performance Metrics

  • Blocked resources: ~15-20 YouTube scripts prevented until user consent
  • Saved bandwidth: ~500KB-1MB per video embed
  • Reduced cookies: 10+ cookies not set until interaction

​
Technical Details

​
Generated URLs

Embed URL: 
https://www.youtube-nocookie.com/embed/{videoId}
Poster URL: 
https://i.ytimg.com/vi/{videoId}/maxresdefault.jpg

​
Iframe Permissions

The dynamically created iframe includes: 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullscreen={true}

Build docs developers (and LLMs) love

Get started for freeTalk to us