eleventy-plugin-vidyard
An Eleventy shortcode, allows to be embedded Vidyard into templates by using Vidyard API v4.
Installation
Install the plugin from npm:
npm install eleventy-plugin-vidyard --save-dev
Add it to your Eleventy Config file:
const eleventyPluginVidyard = require('eleventy-plugin-vidyard');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard);
};Advanced usage:
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 like this:
{% vidyard "https://share.vidyard.com/watch/Cse5Fqy1CpUWqYdtikKrFy?embeded=true" %}into HTML code like this:
<script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async></script>
<img style="max-width: 100%;"
class="vidyard-player-embed"
src="https://play.vidyard.com/Cse5Fqy1CpUWqYdtikKrFy.jpg"
data-uuid="Cse5Fqy1CpUWqYdtikKrFy"
data-v="4"
data-type="inline" />
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
<head>
...
<!-- The script tag should live in the head of your page if at all possible -->
<script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async></script>
...
</head>and set config file to:
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginVidyard, {
script: false
});
};or by passing options to shortcode directly
{% vidyard "https://share.vidyard.com/watch/Cse5Fqy1CpUWqYdtikKrFy?embeded=true", {
script: false,
class: 'vidyard-player-embed my-custom-class',
version: 4,
type: 'inline'
} %}Contributing
If you notice an issue, feel free to open an issue.
- Fork this repo
- Clone
git clone git@github.com:reatlat/eleventy-plugin-vidyard.git - Install dependencies
npm install - Build
npm run build - Serve locally
npm run dev
License
The code is available under the MIT license.
