https://github.com/reatlat/eleventy-plugin-vidyard
An Eleventy shortcode, allows to be embedded Vidyard into templates by using Vidyard API v4.
https://github.com/reatlat/eleventy-plugin-vidyard
11ty 11ty-plugin eleventy eleventy-plugin npm-package vidyard
Last synced: 4 months ago
JSON representation
An Eleventy shortcode, allows to be embedded Vidyard into templates by using Vidyard API v4.
- Host: GitHub
- URL: https://github.com/reatlat/eleventy-plugin-vidyard
- Owner: reatlat
- License: mit
- Created: 2022-05-24T21:20:47.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-06-15T14:54:42.000Z (about 1 year ago)
- Last Synced: 2025-06-15T15:52:24.281Z (about 1 year ago)
- Topics: 11ty, 11ty-plugin, eleventy, eleventy-plugin, npm-package, vidyard
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/eleventy-plugin-vidyard
- Size: 221 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-plugin-vidyard
[](https://npmjs.com/package/eleventy-plugin-vidyard)
[](https://npmjs.com/package/eleventy-plugin-vidyard)
[](https://npmjs.com/package/eleventy-plugin-vidyard)
An Eleventy [shortcode](https://www.11ty.dev/docs/shortcodes/), allows to be embedded [Vidyard](https://www.vidyard.com/) into templates by using Vidyard API v4.
**[Demo](https://eleventy-plugin-vidyard.netlify.app/)**
## Installation
Install the plugin from [npm](https://www.npmjs.com/package/eleventy-plugin-vidyard):
```
npm install eleventy-plugin-vidyard --save-dev
```
Add it to your [Eleventy Config](https://www.11ty.dev/docs/config/) file:
**ESM (Recommended for Eleventy 3.x):**
```js
import eleventyPluginVidyard from 'eleventy-plugin-vidyard';
export default function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard);
}
```
**CommonJS:**
```js
const eleventyPluginVidyard = require('eleventy-plugin-vidyard');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard);
};
```
Advanced usage:
**ESM:**
```js
import eleventyPluginVidyard from 'eleventy-plugin-vidyard';
export default function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard, {
script: true,
class: 'vidyard-player-embed',
version: 4,
type: 'inline'
});
}
```
**CommonJS:**
```js
const eleventyPluginVidyard = require('eleventy-plugin-vidyard');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard, {
script: true,
class: 'vidyard-player-embed',
version: 4,
type: 'inline'
});
};
```
## What does it do?
The plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) like this:
```nunjucks
{% vidyard "https://share.vidyard.com/watch/Cse5Fqy1CpUWqYdtikKrFy?embeded=true" %}
```
into HTML code like this:
```html
```
## Custom Usage
Vidyard documentations says, the script tag should live in the head of your page if at all possible.
In that case, we can disable rendering script within embedded player, and place main script on the head of website manually
```html
...
...
```
and set config file to:
**ESM:**
```js
export default function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard, {
script: false
});
}
```
**CommonJS:**
```js
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard, {
script: false
});
};
```
or by passing options to shortcode directly (Nunjucks):
```nunjucks
{% vidyard "https://share.vidyard.com/watch/Cse5Fqy1CpUWqYdtikKrFy?embeded=true", {
script: false,
class: 'vidyard-player-embed my-custom-class',
version: 4,
type: 'inline'
} %}
```
## Liquid Template Usage
Liquid templates don't support passing objects to shortcodes. Instead, you can pass extra CSS classes as a string argument:
```liquid
{% vidyard "https://share.vidyard.com/watch/VIDEO_ID" %}
{% comment %} With extra classes (appended to default class) {% endcomment %}
{% vidyard "https://share.vidyard.com/watch/VIDEO_ID" "my-custom-class another-class" %}
```
For other options like `script: false`, configure them globally in your Eleventy config file.
## Contributing
If you notice an issue, feel free to [open an issue](https://github.com/reatlat/eleventy-plugin-vidyard/issues).
1. Fork this repo
2. Clone `git clone git@github.com:reatlat/eleventy-plugin-vidyard.git`
3. Install dependencies `npm install`
4. Build `npm run build`
5. Serve locally `npm run dev`
## License
The code is available under the [MIT license](LICENSE).