eleventy-plugin-vidyard

v1.0.1

Published

8 months ago

This Eleventy plugin generate embeds responsive Vidyard videos from share URLs.

Downloads

0High
0Medium
0Low

reatlat

eleventy eleventy-plugin 11ty vidyard video

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 [email protected]: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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

eleventy-plugin-vidyard

Installation

What does it do?

Custom Usage

Contributing

License

May the 4th be with you