Sections

Video library

Easily display videos in your Help Center using several different layouts.

In this article

Videos are a powerful tool for communicating with your end-users. Now you can create a fully-functional, responsive library for your YouTube videos without having to write any code. Simply identify your videos by ID and the choose from one of three built-in layouts: tabs, carousel or grid.

Examples

Three ready-made templates are available out-of-the-box, which you can select using the layout option:

Usage

Use data-element="video-library" on an element to create a new Video Library.

If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

The Video Library plugin can be initialized using JavaScript:

<div id="video-library">...</div>

<script type="text/javascript">
  ready(function() {
    var videoLibrary = document.getElementById('video-library');
    if (!videoLibrary) return;

    new VideoLibrary(videoLibrary, {
      // Options go here
    });
  });
</script>

Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data- and use kebab case instead of camel case.

Name Type Default Description
ids string '' A comma-separated list of YouTube video IDs.
layout string 'grid' The layout to use (grid, carousel or tabs).
showTitle boolean true True if a title should be shown for each video.
showDuration boolean true True if a description should be shown for each video.
playsInline boolean true True if videos should play inline, as opposed to in a lightbox.
useLoader boolean true True if placeholders should be used while the videos are loading.
template string
null
null The name of the template to use.
templateData object {} Additional data to expose to the templating function.

In order for videos to play in a lightbox, you must enable the playsInline option and ensure that lightboxes are enabled in your Help Center.

Video metadata is loaded after the main plugin template has been rendered. The following data-attributes can be used on elements in your custom templates to automatically replace their content with video metadata:

  • data-title="<%= id %>" for the video title
  • data-description="<%= id %>" for the video description
  • data-duration="<%= id %>" for the formatted video duration
  • data-url="<%= id %>" for the video URL

Events

Class Properties
videoLibrary.render Fires when the article list has been rendered.
videoLibrary.playerReady Fires when an individual player is ready.
videoLibrary.ready Fires when all players are ready and the Video Library has been rendered.