BBC Video Embed Component

This document explains how to use the BBC video embed component in your Jekyll posts.

Basic Usage

With URL

<div class="bbc-embed-wrapper">
  <div class="bbc-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://www.bbc.com/videos/cqvv8n1d8dxo"
      title="BBC video"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
  
  
  <div class="bbc-video-fallback">
    <p><small>If the video doesn't load, you can <a href="https://www.bbc.com/videos/cqvv8n1d8dxo" target="_blank" rel="noopener">view it directly on BBC</a>.</small></p>
  </div>
</div>
 

With Video ID

<div class="bbc-embed-wrapper">
  <div class="bbc-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://www.bbc.com/videos/cqvv8n1d8dxo"
      title="BBC video"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
  
  
  <div class="bbc-video-fallback">
    <p><small>If the video doesn't load, you can <a href="https://www.bbc.com/videos/cqvv8n1d8dxo" target="_blank" rel="noopener">view it directly on BBC</a>.</small></p>
  </div>
</div>
 

With Custom Title

<div class="bbc-embed-wrapper">
  <div class="bbc-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://www.bbc.com/videos/cqvv8n1d8dxo"
      title="1951: Alan Turing's 'Can Digital Computers Think?'"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
  
  
  <div class="bbc-video-fallback">
    <p><small>If the video doesn't load, you can <a href="https://www.bbc.com/videos/cqvv8n1d8dxo" target="_blank" rel="noopener">view it directly on BBC</a>.</small></p>
  </div>
</div>
 

With Start Time

<div class="bbc-embed-wrapper">
  <div class="bbc-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://www.bbc.com/videos/cqvv8n1d8dxo?start=120"
      title="Alan Turing lecture (starting at 2 minutes)"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
  
  
  <div class="bbc-video-fallback">
    <p><small>If the video doesn't load, you can <a href="https://www.bbc.com/videos/cqvv8n1d8dxo" target="_blank" rel="noopener">view it directly on BBC</a>.</small></p>
  </div>
</div>
 

With Autoplay (Use with caution)

<div class="bbc-embed-wrapper">
  <div class="bbc-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://www.bbc.com/videos/cqvv8n1d8dxo?autoplay=1"
      title="Alan Turing lecture (autoplay)"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
  
  
  <div class="bbc-video-fallback">
    <p><small>If the video doesn't load, you can <a href="https://www.bbc.com/videos/cqvv8n1d8dxo" target="_blank" rel="noopener">view it directly on BBC</a>.</small></p>
  </div>
</div>
 

All Parameters

<div class="bbc-embed-wrapper">
  <div class="bbc-embed-container">
    <iframe 
      width="800" 
      height="450" 
      src="https://www.bbc.com/videos/cqvv8n1d8dxo"
      title="Custom Title"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
  
  
  <div class="bbc-video-fallback">
    <p><small>If the video doesn't load, you can <a href="https://www.bbc.com/videos/cqvv8n1d8dxo" target="_blank" rel="noopener">view it directly on BBC</a>.</small></p>
  </div>
</div>
 

Parameters Explained

• id: The BBC video ID (required if no URL provided)
• url: Full BBC video URL (required if no ID provided)
• title: Custom title for accessibility (default: “BBC video”)
• width: Custom width in pixels (default: “560”)
• height: Custom height in pixels (default: “315”)
• autoplay: Set to “1” to enable autoplay (default: “0”)
• start: Start time in seconds (default: “0”)

How to Get the Video ID

To get the BBC video ID from a URL:

1. Standard BBC URL: https://www.bbc.com/videos/cqvv8n1d8dxo
   • The ID is: cqvv8n1d8dxo (everything after /videos/)
2. BBC UK URL: https://www.bbc.co.uk/videos/cqvv8n1d8dxo
   • The ID is still: cqvv8n1d8dxo
3. BBC URL with trailing slash: https://www.bbc.com/videos/cqvv8n1d8dxo/
   • The ID is still: cqvv8n1d8dxo
4. BBC URL with query parameters: https://www.bbc.com/videos/cqvv8n1d8dxo?language=en
   • The ID is still: cqvv8n1d8dxo

Features

✅ Fully Responsive: Videos automatically adjust to screen size
✅ Accessible: Proper ARIA labels and titles
✅ Fast Loading: Uses BBC’s embed player
✅ Customizable: Multiple options for different use cases
✅ Error Handling: Clear error messages if video ID is missing
✅ URL Parsing: Automatically extracts video ID from full URLs
✅ Fallback Link: Provides direct link to BBC if embed fails

Tips for Best Results

• Always include a descriptive title parameter for accessibility
• Use start parameter to link to specific moments in videos
• Avoid autoplay unless absolutely necessary (it can be annoying!)
• Test your embeds on mobile devices to ensure they look good
• BBC videos may have regional restrictions, so consider your audience

Browser Support

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ Mobile browsers

Notes

• BBC videos must be publicly accessible to be embedded
• Some videos may have embedding restrictions
• Autoplay is disabled by default to respect user preferences
• The component supports both URL and ID-based embedding for flexibility
• BBC videos may have regional restrictions depending on your location

Examples

Basic Example

If the video doesn't load, you can view it directly on BBC.

With Start Time

If the video doesn't load, you can view it directly on BBC.