Vidyard Embed Code

The Vidyard Embed code is published in 2 variants, a script tag and a UMD module.

Script Tag

Exposed as main in package.json and also served from our CDN https://play.vidyard.com/embed/v4.js.

The script tag is auto executing, it will scan the document for Vidyard embed placeholder images and render the players.

<!-- 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>

<!-- Put this wherever you would like your player to appear -->
<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"
/>

Options For Rendering Players

Unstructured Metadata

To pass unstructured metadata to the player use the data-vydata attribute, the one caveat here is data attributes use the DOMStringMap format which limits the characters we can use for the key, hence we pass all of the complex nested data as a stringified and URI encoded JSON.

plaeholderImg.setAttribute('data-vydata', encodeURIComponent(JSON.stringify({location: "here", more: "yes"})));

Listening to Ready

The embed script is loaded asynchronously hence we notify the client code on the embed code availability:

Simple client code example:

// initApp is the client's function that interacts with the Vidyard API
// this needs to be defined before the v4 embed script is added to the page
window['onVidyardAPI'] = (vyApi) => initApp(vyApi);

Or check for the presence of the API global and fallback to the onVidyardAPI

// initApp is the client's function that interacts with the Vidyard API
// this can be defined anywhere in the client code
window.vidyardEmbed
  ? initApp(window.vidyardEmbed)
  : (window.onVidyardAPI = (vyApi) => initApp(vyApi));

Or with promises:

// this can be defined anywhere in the client code
new Promise(res => window.vidyardEmbed
  ? res(window.vidyardEmbed)
  : (window['onVidyardAPI'] = (vyApi) => res(vyApi))
).then((vyApi) => {
  console.log('The Vidyard API is ready ', vyApi);
});

For IE9+ we also dispatch an onVidyardAPI custom event on document that can be listened on instead of using the global callback:

// initApp is the client's function that interacts with the Vidyard API
window.vidyardEmbed
  ? initApp(window.vidyardEmbed)
  : document.addEventListener('onVidyardAPI', ({ detail: vyApi }) => initApp(vyApi));

UMD Module

Exposed as the module filed in package.json, bundling tools like Webpack should use this filed.

The UMD is also available from our CDN, https://play.vidyard.com/embed/v4.umd.js, it will not auto execute when imported, requiring the client to render the players by calling vidyardEmbed.api.renderPlayer or vidyardEmbed.api.renderDOMPlayers.

import vidyardEmbed from '@vidyard/embed-script';
vidyardEmbed.api.renderDOMPlayers();

Public API Documentation

The Vidyard global object and the named exports of the module expose the follwoing APIs:

VidyardV4 = {
  api: {
    GDPR: { consent, hasConsentOnReady },
    addReadyListener,
    getPlayersByUUID,
    progressEvents,
    renderDOMPlayers,
    renderPlayer,
  }
}

GDPR.consent([true|false])

import vidyardEmbed from '@vidyard/embed-code';
userHasGivenConsent() {    // embed page code
  vidyardEmbed.api.GDPR.consent(true);
}

GDPR.hasConsentOnReady(cb)

import vidyardEmbed from '@vidyard/embed-code';
vidyardEmbed.api.GDPR.hasConsentOnReady((consent) => {
  if (!consent) {
    showConsentPrompt();   // embed page code
  } else {
    greet();               // embed page code
  }
});

addReadyListener(cb[, uuid])

import vidyardEmbed from '@vidyard/embed-code';
vidyardEmbed.api.addReadyListener((_, player) => {
  console.log('the player is ready', player);
  player.seek(20);
  player.play();
});

getPlayersByUUID(uuid)

import vidyardEmbed from '@vidyard/embed-code';
const players = vidyardEmbed.api.getPlayersByUUID('xxxxxxxxxxxxxxxxxxxxxx');
players[0].ready();

progressEvents(cb)

import vidyardEmbed from '@vidyard/embed-code';
vidyardEmbed.api.addReadyListener((_, player) => {
  vidyardEmbed.api.progressEvents(({ chapter, event, player }) => {
    const { name } = player.metadata.chapters_attributes[chapter].video_attributes;
    console.log(`${name}: ${event}%`);

    if (event === 4) {
      player.pause();
    }

  }, [1, 2, 3, 4, 25, 50, 75, 100]);
}, 'xxxxxxxxxxxxxxxxxxxxxx');

renderDOMPlayers([container])

import vidyardEmbed from '@vidyard/embed-code';
vidyardEmbed.api.renderDOMPlayers();

Or player in a specific container:

import vidyardEmbed from '@vidyard/embed-code';
const playersContainer = document.getElementById('video-content');
vidyardEmbed.api.renderDOMPlayers(playersContainer);

renderPlayer(options)

import vidyardEmbed from '@vidyard/embed-code';
const placeholderImage = document.querySelectorAll('img.vidyard-player-embed')[0];
vidyardEmbed.api.renderPlayer(placeholderImage);

Or using a data object:

import vidyardEmbed from '@vidyard/embed-code';
vidyardEmbed.api.renderPlayer({
  uuid: 'xxxxxxxxxxxxxxxxxxxxxx',
  container: document.getElementById('player-container');
  // optional
  type: 'lightbox',
  aspect: 'landscape',
  vydata: encodeURIComponent(JSON.stringify({location: 'here', more: 'yes'}),
  // ...
  // any additional parameters
});

destroyPlayer(player)

const player = api.getPlayersByUUID('Cse5Fqy1CpUWqYdtikKrFy')[0];
api.destroyPlayer(player);