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.