Skip to content

Video Embedding

Embed videos from various sources with responsive containers, privacy controls, and accessibility features.

Overview

Our video embedding features include:

  • Responsive Containers - Videos adapt to any screen size
  • Privacy-Enhanced Mode - YouTube no-cookie embedding
  • Lazy Loading - Improved page performance
  • Multiple Sources - YouTube, Vimeo, and HTML5 video
  • Accessibility - Captions and transcripts support
  • Dark Mode - Automatic theme adaptation

YouTube Videos

Basic Embedding

<div class="video-wrapper">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
          title="Video title"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>
</div>

Privacy-Enhanced Embedding

Use youtube-nocookie.com for GDPR compliance:

This video uses privacy-enhanced mode. YouTube won't store information about visitors unless they play the video.

With Custom Start Time

Start video at specific timestamp:

<div class="video-wrapper">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=120"
          title="Video starting at 2:00"
          allowfullscreen>
  </iframe>
</div>

Vimeo Videos

Basic Vimeo Embed

<div class="video-wrapper">
  <iframe src="https://player.vimeo.com/video/VIDEO_ID"
          title="Video title"
          frameborder="0"
          allow="autoplay; fullscreen; picture-in-picture"
          allowfullscreen>
  </iframe>
</div>

Vimeo with Options

<div class="video-wrapper">
  <iframe src="https://player.vimeo.com/video/VIDEO_ID?color=2196F3&title=0&byline=0&portrait=0"
          allowfullscreen>
  </iframe>
</div>

HTML5 Video

Basic HTML5 Video

<video controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

With Poster and Captions

<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

Autoplay Background Video

<video autoplay muted loop>
  <source src="background.mp4" type="video/mp4">
</video>

Lazy Loading

With Placeholder Image

Improve performance by loading videos only when needed:

Video thumbnail 
<div class="video-placeholder" onclick="loadVideo(this, 'VIDEO_ID')">
  <img loading="lazy" src="https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg" alt="Video thumbnail">
  <div class="play-button">
    <div class="play-icon"></div>
  </div>
</div>

Aspect Ratios

16:9 (Default)

4:3 Classic

21:9 Ultra-wide

Square (1:1)

Create a gallery of related videos:

Getting Started
Introduction to our documentation system
Advanced Features
Deep dive into advanced functionality

Accessibility

Video with Transcript

Video Transcript

This is where the full transcript of the video would go, making the content accessible to users who cannot watch the video or prefer to read.

Best Practices

  1. Always include title attribute on iframes for screen readers
  2. Provide captions for all videos
  3. Include transcripts for important content
  4. Use descriptive text around videos
  5. Test with keyboard navigation

Performance Tips

1. Use Lazy Loading

function loadVideo(element, videoId) {
  const wrapper = document.createElement('div');
  wrapper.className = 'video-wrapper';
  wrapper.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1" allowfullscreen></iframe>`;
  element.replaceWith(wrapper);
}

2. Optimize Thumbnails

  • Use WebP format when possible
  • Compress images appropriately
  • Use responsive image sizes

3. Limit Videos Per Page

  • Consider pagination for video galleries
  • Use placeholders for initial load
  • Load videos on scroll

Social Media Integration

When videos are embedded, they automatically get optimized social media cards:

# Page metadata
---
title: Video Tutorial
description: Learn how to use our platform
image: https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg
---

Privacy Considerations

GDPR Compliance

  1. Use youtube-nocookie.com domain
  2. Add privacy notices where appropriate
  3. Consider lazy loading to avoid automatic tracking
  4. Provide alternative content methods
<div class="video-privacy-notice">
  This video is embedded from YouTube.
  By playing it, you accept YouTube's privacy policy.
</div>

Examples

Tutorial Video with Caption

MkDocs Tutorial: Getting started with documentation

Playlist Embedding

<div class="video-wrapper">
  <iframe src="https://www.youtube-nocookie.com/embed/videoseries?list=PLAYLIST_ID"
          title="Video playlist"
          allowfullscreen>
  </iframe>
</div>

Live Stream

<div class="video-wrapper">
  <iframe src="https://www.youtube-nocookie.com/embed/live_stream?channel=CHANNEL_ID"
          title="Live stream"
          allowfullscreen>
  </iframe>
</div>

Troubleshooting

Video Not Loading

  1. Check URL is correct
  2. Verify video privacy settings
  3. Test in different browsers
  4. Check console for errors

Responsive Issues

  1. Ensure parent container has width
  2. Check CSS conflicts
  3. Test on actual devices
  4. Verify aspect ratio class

Performance Problems

  1. Implement lazy loading
  2. Reduce number of embeds
  3. Use facade pattern
  4. Optimize page weight