TED Talk Embed Component

This document explains how to use the TED talk embed component in your Jekyll posts.

Basic Usage

With URL

<div class="ted-embed-wrapper">
  <div class="ted-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://embed.ted.com/talks/james_randi_homeopathy_quackery_and_fraud"
      title="TED talk"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
</div>
 

With Talk ID

<div class="ted-embed-wrapper">
  <div class="ted-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://embed.ted.com/talks/james_randi_homeopathy_quackery_and_fraud"
      title="TED talk"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
</div>
 

With Custom Title

<div class="ted-embed-wrapper">
  <div class="ted-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://embed.ted.com/talks/james_randi_homeopathy_quackery_and_fraud"
      title="James Randi: Homeopathy, quackery and fraud"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
</div>
 

With Start Time

<div class="ted-embed-wrapper">
  <div class="ted-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://embed.ted.com/talks/james_randi_homeopathy_quackery_and_fraud?start=120"
      title="James Randi: Homeopathy, quackery and fraud (starting at 2 minutes)"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
</div>
 

With Autoplay (Use with caution)

<div class="ted-embed-wrapper">
  <div class="ted-embed-container">
    <iframe 
      width="560" 
      height="315" 
      src="https://embed.ted.com/talks/james_randi_homeopathy_quackery_and_fraud?autoplay=1"
      title="James Randi: Homeopathy, quackery and fraud (autoplay)"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
</div>
 

All Parameters

<div class="ted-embed-wrapper">
  <div class="ted-embed-container">
    <iframe 
      width="800" 
      height="450" 
      src="https://embed.ted.com/talks/james_randi_homeopathy_quackery_and_fraud"
      title="Custom Title"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen>
    </iframe>
  </div>
</div>
 

Parameters Explained

• id: The TED talk ID (required if no URL provided)
• url: Full TED talk URL (required if no ID provided)
• title: Custom title for accessibility (default: “TED talk”)
• 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 Talk ID

To get the TED talk ID from a URL:

1. Standard TED URL: https://www.ted.com/talks/james_randi_homeopathy_quackery_and_fraud
   • The ID is: james_randi_homeopathy_quackery_and_fraud (everything after /talks/)
2. TED URL with trailing slash: https://www.ted.com/talks/james_randi_homeopathy_quackery_and_fraud/
   • The ID is still: james_randi_homeopathy_quackery_and_fraud
3. TED URL with query parameters: https://www.ted.com/talks/james_randi_homeopathy_quackery_and_fraud?language=en
   • The ID is still: james_randi_homeopathy_quackery_and_fraud

Features

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

Tips for Best Results

• Always include a descriptive title parameter for accessibility
• Use start parameter to link to specific moments in talks
• Avoid autoplay unless absolutely necessary (it can be annoying!)
• Test your embeds on mobile devices to ensure they look good
• TED talks are typically 18 minutes or less, so consider if you need a start time

Browser Support

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

Notes

• TED talks must be publicly accessible to be embedded
• Some talks may have embedding restrictions
• Autoplay is disabled by default to respect user preferences
• The component supports both URL and ID-based embedding for flexibility

Examples

Basic Example

With Start Time