An Eleventy plugin to automatically embed Twitch streams, using just their URLs.
npm install eleventy-plugin-embed-twitch
\


This Eleventy plugin automatically embeds responsive Twitch videos from URLs in Markdown files.
- ⚡️ Installation
- 🛠 Usage
- ⚙️ Settings
- ⚠️ Notes and caveats
---
In your Eleventy project, install the plugin through npm:
``sh`
$ npm i eleventy-plugin-embed-twitch
Then add it to your Eleventy config file:
`javascript
const embedTwitch = require("eleventy-plugin-embed-twitch");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(embedTwitch, {
/**
* parent is now a REQUIRED option. It MUST comply with these specs (set by Twitch):`
* - Must be a text string
* - Must be the domain where the embed will be shown, without the protocol
* - Reference: https://dev.twitch.tv/docs/embed/video-and-clips#non-interactive-inline-frames-for-live-streams-and-vods
*/
parent: "example.com"
});
};
To embed a Twitch stream or 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.twitch.tv/vixella
Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.
`
!Twitch streamer Vixella playing Animal Crossing
You can configure the plugin to change its behavior by passing an options object to the addPlugin function:
`javascriptparent
eleventyConfig.addPlugin(embedTwitch, {
// value is required!`
parent: "example.com",
//...set additional options here
});
Edit any of the default values in this options object to override the plugin behavior. These are the default settings, which will apply to all embed instances. Currently there’s no way to configure individual embeds.
`javascript
{
// Default “allow” attributes that get applied to the embed