eleventy-plugin-embed-everything

This Eleventy plugin will automatically embed common media formats in your pages, requiring only a URL in your markdown files.

It currently supports a range of services.

• ⚡️ Installation
• 🛠 Usage
• 🌈 Supported services
• ⚙️ Settings
• ⚠️ Notes and caveats

⚡️ Installation

In your Eleventy project, install the plugin through npm:

$ npm i eleventy-plugin-embed-everything

Then add it to your Eleventy config file:

const embedEverything = require("eleventy-plugin-embed-everything");

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

🛠 Usage

To embed a YouTube 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.youtube.com/watch?v=dQw4w9WgXcQ

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

The same principle applies to all supported services.

Result:

🌈 Supported services

Currently, the plugin supports the following embed services (listed alphabetically). You can also install them individually, check their npm pages for details.

Service | Handle | Active by default?(How to activate) | 🔗 npm | 🔗 GitHub | Options ---|---|---|---|---|--- Bluesky | bluesky | ❌ No | npm | GitHub | Options Instagram | instagram | ✅ Yes | npm | GitHub | Options Mastodon | mastodon | ❌ No | npm | GitHub | Options OpenStreetMap | openstreetmap | ✅ Yes | npm | GitHub | Options SoundCloud | soundcloud | ❌ No | npm | GitHub | Options Spotify | spotify | ✅ Yes | npm | GitHub | Options TED | ted | ✅ Yes | npm | GitHub | Options TikTok | tiktok | ✅ Yes | npm | GitHub | Options Twitch | twitch | ✅ Yes | npm | GitHub | Options Twitter | twitter | ✅ Yes | npm | GitHub | Options Vimeo | vimeo | ✅ Yes | npm | GitHub | Options YouTube | youtube | ✅ Yes | npm | GitHub | Options

[!NOTE] Why are some plugins not active by default? Some services require API calls to fetch the relevant embed data. Because these network calls can affect build times, you'll have to opt-in to using them.

Got a suggestion? File an issue!

⚙️ Settings

The plugin supports a number of frequently used services by default, and they have default settings of their own.

Configure which embed services are active

You can configure which services you want active by passing an options object to the addPlugin function:

Example: configure the plugin to embed all default services plus SoundCloud

eleventyConfig.addPlugin(embedEverything, {
  add: ['soundcloud']
});

Example: configure the plugin to embed only Vimeo and Instagram:

eleventyConfig.addPlugin(embedEverything, {
  use: ['vimeo', 'instagram']
});

Configure embed services individually

Each service comes with some useful defaults, but you can also configure each one individually. Override each plugin’s defaults by passing an options object that includes its handle as the key:

// configure YouTube videos to prohibit fullscreen
eleventyConfig.addPlugin(embedEverything, {
  youtube: {
    options: {
      allowFullscreen: false
    }
  }
});

Substitute the plugin Handle (vimeo, instagram, and so on) in place of youtube. Consult the individual plugin packages for their relevant defaults and options.

⚠️ Notes and caveats

• This plugin does very little on its own. Instead, it aggregates other embed plugins in a single place.
• Each service is itself a standalone Eleventy plugin, each of which you can install individually.
• If there’s a specific service you’d want added, please open an issue.
• We aim to match 11ty's supported Node.js versions. It may work on older versions but this isn't tested or guaranteed.