ted

eleventy-plugin-embed-ted

This Eleventy plugin automatically embeds TED.com videos from URLs in markdown files. It’s part of the eleventy-plugin-embed-everything project.

Install in Eleventy

In your Eleventy project, install the plugin through npm:

$ npm i eleventy-plugin-embed-ted

Then add it to your Eleventy config file (usually .eleventy.js):

const embedTed = require("eleventy-plugin-embed-ted");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(embedTed);
};

Usage

To embed a TED.com video into any markdown page, paste its URL into a new line. The URL should be the only thing on that line.

Markdown file example:

...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.

https://www.ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution

Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.

...

Result:

Settings

You can configure the plugin to change its behavior by passing an options object to the addPlugin function:

eleventyConfig.addPlugin(embedTed, {
  // just an example, see default values below:
  embedClass: 'custom-classname'
});

Plugin default options

The plugin’s default settings reside in lib/defaults.js. All of these values can be customized with an options object passed to the plugin.

Option	Type	Default	Notes
allowFullscreen	Boolean	true	Set to false to prevent the embedded video from being viewed in fullscreen mode.
containerCss	String	"position:relative;width:100%;padding-top: 56.25%;"	CSS applied to the container <div> that wraps the embedded video.
embedClass	String	"eleventy-plugin-embed-ted"	CSS class applied to the container <div> that wraps the embedded video.
iframeCss	String	"position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;"	CSS applied to the <iframe> that contains the embedded video.
iframeFrameborder	String	"0"	Width of the iframe’s border in pixels.
iframeHeight	String	"100%"	Height of the iframe.
iframeScrolling	String	"no"	Whether the iframe should have scrollbars.
iframeWidth	String	"100%"	Width of the iframe.

Supported URL patterns

The plugin supports common URL variants as well. These will also work:

<!-- No protocol: -->

ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution
www.ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution

<!-- With or without HTTPS: -->

https://www.ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution
http://www.ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution

<!-- With or without 'www': -->

https://www.ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution
https://ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution

<!-- URLs with extra parameters: -->
https://www.ted.com/talks/mena_trott_meet_the_founder_of_the_blog_revolution?lang=en

Notes and caveats

• This plugin is deliberately designed only to embed when the URL is on its own line, and not inline with other text.
• To do this, it uses a regular expression to recognize TED URLs, wrapped in an HTML <p> tag. If your Markdown parser produces any other output, it won’t be recognized.
• I’ve tried to accommodate common URL variants, but there are conceivably valid TED URLs that wouldn’t get recognized. Please file an issue if you run into an edge case!
• This plugin uses transforms, so it alters Eleventy’s HTML output as it’s generated. It doesn’t alter the source markdown.