YouTube Video Embedding Demo

YouTube Component Demo

The XenT theme includes a responsive YouTube embedding component that automatically handles aspect ratios, accessibility, and responsive behavior.

Basic Usage

Simply use the YouTube directive with a video ID:

::youtube{id="dQw4w9WgXcQ" title="Rick Astley - Never Gonna Give You Up"}

Or with just the video ID:

::youtube[dQw4w9WgXcQ]

Example: Responsive Embed

Here’s a responsive YouTube embed that maintains a 16:9 aspect ratio:

Component Features

The YouTube component supports several configuration options:

Required Props

  • videoId: The YouTube video ID (from the URL)
  • title: Video title for accessibility (optional but recommended)

Optional Props

  • start: Start time in seconds
  • autoplay: Enable autoplay (not recommended for UX)
  • showRelated: Show related videos at end
  • width/height: Custom dimensions (overrides responsive behavior)

Advanced Example

Here’s an example with custom start time:

Technical Implementation

The component features:

  • Responsive Design: Automatically maintains 16
    aspect ratio
  • Accessibility: Proper iframe titles and attributes
  • Performance: Lazy loading and minimal overhead
  • Privacy: No cookies until user interaction
  • Clean Styling: Integrates with XenT theme design system
  • Print Support: Shows video title when printed

Usage in Markdown

To use in your markdown posts, simply add the directive:

Your content here...

:youtube{id="YOUR_VIDEO_ID" title="Your video title"}

Or with just the video ID for simple cases:

:youtube[YOUR_VIDEO_ID]

Video ID Extraction

To get the video ID from a YouTube URL:

  • Standard URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ → dQw4w9WgXcQ
  • Short URL: https://youtu.be/dQw4w9WgXcQ → dQw4w9WgXcQ
  • Embed URL: https://www.youtube.com/embed/dQw4w9WgXcQ → dQw4w9WgXcQ

The video ID is the part after v=, after youtu.be/, or after embed/.

Responsive Behavior

The component automatically adapts to different screen sizes:

  • Desktop: Full width with proper aspect ratio
  • Tablet: Maintains responsiveness with smaller margins
  • Mobile: Optimized for small screens with reduced border radius
  • Print: Shows video title instead of iframe

This makes it perfect for content that needs to work across all devices and contexts.