An Eleventy plugin to automatically embed TED videos, using just their URLs.
npm install 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.
In your Eleventy project, install the plugin through npm:
``sh`
$ npm i eleventy-plugin-embed-ted
Then add it to your Eleventy config file (usually .eleventy.js):
`javascript
const embedTed = require("eleventy-plugin-embed-ted");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(embedTed);
};
`
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
...
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.
...
`
!Screenshot of Mena Trott's 2006 TED talk about the blogosphere
You can configure the plugin to change its behavior by passing an options object to the addPlugin function:
`javascript`
eleventyConfig.addPlugin(embedTed, {
// just an example, see default values below:
embedClass: 'custom-classname'
});
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
that wraps the embedded video.
embedClass | String | "eleventy-plugin-embed-ted" | CSS class applied to the container 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