11ty Plugin: Vidyard

This plugin adds a shortcode to your Eleventy project to easily embed Vidyard videos using the Vidyard Player API v4.

Installation

Install the plugin from npm:

npm install eleventy-plugin-vidyard --save-dev

Configuration

script - Include the Vidyard embed script.
Default: true
class - The class attribute for the player image.
Default: vidyard-player-embed
version - The Vidyard API version.
Default: 4
type - The player type.
Default: inline

Usage

Add it to your Eleventy Config config file:

ESM (Eleventy 3.0+)

import eleventyPluginVidyard from 'eleventy-plugin-vidyard';

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginVidyard);
};

CommonJS (Eleventy 2.x)

const eleventyPluginVidyard = require('eleventy-plugin-vidyard');

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

Advanced usage:

import eleventyPluginVidyard from 'eleventy-plugin-vidyard';

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginVidyard, {
        script: true,
        class: 'vidyard-player-embed',
        version: 4,
        type: 'inline'
    });
};

Template usage (Nunjucks):

{% vidyard "https://share.vidyard.com/watch/VIDEO_ID" %}


{% vidyard "https://share.vidyard.com/watch/VIDEO_ID", { script: false, class: "custom-class" } %}

Template usage (Liquid):

Note: Liquid templates don't support passing objects. Pass extra classes as a string instead:

{% vidyard "https://share.vidyard.com/watch/VIDEO_ID" %}


{% vidyard "https://share.vidyard.com/watch/VIDEO_ID" "my-custom-class" %}

View Liquid template demo →

Demo

Basic Embed

Custom Options

You can pass options directly to the shortcode:

{% vidyard "https://share.vidyard.com/watch/VIDEO_ID", {
    script: false,
    class: 'vidyard-player-embed my-custom-class'
} %}

Custom Usage

Vidyard documentation recommends placing the script tag in the head of your page. In that case, disable script rendering in the shortcode:

<head>
    <script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async></script>
</head>

And configure the plugin:

eleventyConfig.addPlugin(eleventyPluginVidyard, {
    script: false
});

License

MIT License