1.0.1 • Published 7 months ago

eleventy-plugin-embed-ted v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

eleventy-plugin-embed-ted

NPM Version Build test status\ MIT License Contributor Covenant

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:

Screenshot of Mena Trott's 2006 TED talk about the blogosphere

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.

OptionTypeDefaultNotes
allowFullscreenBooleantrueSet to false to prevent the embedded video from being viewed in fullscreen mode.
containerCssString"position:relative;width:100%;padding-top: 56.25%;"CSS applied to the container <div> that wraps the embedded video.
embedClassString"eleventy-plugin-embed-ted"CSS class applied to the container <div> that wraps the embedded video.
iframeCssString"position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;"CSS applied to the <iframe> that contains the embedded video.
iframeFrameborderString"0"Width of the iframe’s border in pixels.
iframeHeightString"100%"Height of the iframe.
iframeScrollingString"no"Whether the iframe should have scrollbars.
iframeWidthString"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.