Demo 12: YouTube Embeds | Web Video Lesson

            <iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Descriptive title"
  allowfullscreen
  loading="lazy"
></iframe>
          

            <iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Descriptive title"
  allowfullscreen
></iframe>
          

Using youtube-nocookie.com prevents YouTube from storing tracking cookies until the user plays the video.

🚀 Performance: Facade Pattern

Each YouTube iframe loads ~1MB of JavaScript. On pages with multiple embeds, this destroys performance. The facade pattern shows a lightweight placeholder that only loads the full player when clicked.

Standard Embed

~1MB

Per video, loaded immediately

Facade Pattern

~10KB

Thumbnail + JS, load player on click

Lite YouTube Embed Demo

Click the video below to load the actual YouTube player:

        <script type="module"
  src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.0/src/lite-yt-embed.js"
></script>
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.0/src/lite-yt-embed.css"
>

<lite-youtube
  videoid="VIDEO_ID"
  playlabel="Play: Video Title"
></lite-youtube>
      

🎛️ Useful URL Parameters

        https://www.youtube.com/embed/VIDEO_ID?
  autoplay=1           // Auto-start (requires mute=1)
  &mute=1              // Start muted
  &start=30            // Start at 30 seconds
  &end=60              // End at 60 seconds
  &loop=1              // Loop video
  &playlist=VIDEO_ID   // Required for loop
  &controls=0          // Hide controls
  &modestbranding=1   // Minimal YouTube branding
  &rel=0               // Show related from same channel
  &cc_load_policy=1   // Show captions by default
      