Enhanced YouTube Link Handling with Embedded Iframes and Copy Functionality

Summary

Enhanced the markdown link processing in AstroMarkdown.astro to automatically detect YouTube URLs and convert them to embedded iframes with captions and copy functionality.

Why Care

This enhancement significantly improves content authoring experience by automatically converting YouTube links to embedded videos, eliminating the need for manual iframe code. The addition of captions and copy functionality provides better context and sharing capabilities, making the content more interactive and user-friendly.

Implementation

Changes Made

  • File Modified: site/src/components/markdown/AstroMarkdown.astro
  • Lines Modified: 360-450 (approximately)
  • Functionality Added:
    • YouTube URL detection for multiple formats (youtu.be, youtube.com/watch, youtube.com/embed, youtube.com/v)
    • Automatic iframe generation with proper aspect ratio and responsive design
    • Link text extraction for caption display
    • Copy button with SVG icon for URL sharing
    • Enhanced styling with hover effects and visual feedback

Tree Structure Impact

text 
site/src/components/markdown/
└── AstroMarkdown.astro (modified)
    ├── YouTube URL detection logic
    ├── Iframe generation with embed URLs
    ├── Caption extraction and display
    ├── Copy button with SVG icon
    └── Enhanced CSS styling

Technical Details

YouTube URL Detection

The implementation supports multiple YouTube URL formats through regex pattern matching:
javascript 
// youtu.be format
const youtuBeMatch = url.match(/youtu\.be\/([a-zA-Z0-9_-]+)/);
// youtube.com/watch format  
const watchMatch = url.match(/youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]+)/);
// youtube.com/embed format
const embedMatch = url.match(/youtube\.com\/embed\/([a-zA-Z0-9_-]+)/);
// youtube.com/v format
const vMatch = url.match(/youtube\.com\/v\/([a-zA-Z0-9_-]+)/);

Iframe Generation

Generated iframes include all necessary YouTube attributes and responsive styling:
html 
<iframe 
  style="aspect-ratio:16/9;width:100%;height:auto" 
  src="https://www.youtube.com/embed/VIDEO_ID?si=PARAMETER"
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen
/>

Link Text Extraction

Recursive function to extract text content from markdown link children:
javascript 
const extractLinkText = (children) => {
  if (!children || children.length === 0) return '';
  
  return children.map(child => {
    if (child.type === 'text') {
      return child.value || '';
    } else if (child.children) {
      return extractLinkText(child.children);
    }
    return '';
  }).join('');
};

Copy Button Implementation

SVG-based copy button with clipboard functionality:
html 
<button 
  class="copy-url-btn" 
  onclick="navigator.clipboard.writeText('URL').then(() => {
    const btn = event.target.closest('.copy-url-btn');
    btn.classList.add('copied');
    setTimeout(() => btn.classList.remove('copied'), 2000);
  })"
>
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
    <path d="M16 3H4V16" stroke="currentColor" stroke-width="2"/>
    <path d="M8 7H20V20H8V7Z" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Integration Points

Markdown Processing Pipeline

  • Integrates seamlessly with existing AstroMarkdown.astro component
  • Maintains backward compatibility with regular links
  • Preserves existing link handling for non-YouTube URLs
  • Works with the existing markdown AST processing system

Styling Integration

  • Uses consistent design language with existing components
  • Responsive design that adapts to different screen sizes
  • Dark theme compatible styling
  • Hover effects and transitions for better UX

Query Parameter Preservation

  • Automatically preserves YouTube URL parameters (e.g., si parameter)
  • Maintains video context and tracking information
  • Ensures embedded videos retain original functionality

Documentation

Usage Examples

Basic YouTube Link:
markdown 
https://youtu.be/UYPHqrtfGfo?si=djrP1ZOmeHNZi5qX
Markdown Link with Caption:
markdown 
[Vibe coding: Epigenetic age calculator GUI with Cursor and Lovable](https://youtu.be/UYPHqrtfGfo?si=djrP1ZOmeHNZi5qX)
Supported URL Formats:
  • https://youtu.be/VIDEO_ID
  • https://www.youtube.com/watch?v=VIDEO_ID
  • https://www.youtube.com/embed/VIDEO_ID
  • https://www.youtube.com/v/VIDEO_ID

Generated Output

The markdown links are automatically converted to:
html 
<div class="youtube-embed-wrapper">
  <iframe style="aspect-ratio:16/9;width:100%;height:auto" 
          src="https://www.youtube.com/embed/UYPHqrtfGfo?si=djrP1ZOmeHNZi5qX" 
          title="YouTube video player" 
          frameborder="0" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          referrerpolicy="strict-origin-when-cross-origin" 
          allowfullscreen>
  </iframe>
  <div class="youtube-caption">
    <div class="caption-content">Vibe coding: Epigenetic age calculator GUI with Cursor and Lovable</div>
    <button class="copy-url-btn" title="Copy video URL to clipboard">
      <svg>...</svg>
    </button>
  </div>
</div>

Example Output

Vibe coding: Epigenetic age calculator GUI with Cursor and Lovable

CSS Styling

The implementation includes comprehensive styling for:
  • Responsive iframe container with rounded corners and shadows
  • Caption layout with flexbox spacing
  • Copy button with hover effects and visual feedback
  • Dark theme compatibility
  • Accessibility considerations

Performance Impact

  • Minimal performance impact as detection is done at render time
  • No additional network requests for URL processing
  • Efficient regex pattern matching
  • Lightweight SVG icons instead of external assets

Browser Compatibility

  • Uses modern Clipboard API for copy functionality
  • Graceful fallback for older browsers
  • Responsive design works across all modern browsers
  • SVG icons ensure consistent rendering