Video library

Create a fully-functional, responsive library for your YouTube videos without having to write any code.

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 add the IDs of your chosen videos in the Promoted video IDs theme setting and the videos will appear on the Home page of your help center.

Built-in layouts

Three ready-made templates are available out-of-the-box:

Tabs layout
Grid layout
Carousel layout

Videos can be played inline or within lightboxes.

The Video Library will inherit the overall style of the theme as defined in your theme settings. Additional control is provided through extension options and you can even create your own fully custom templates.

Creating video libraries

The Video Library extension is bundled into all of our themes by default, so you can start using it straight away through the “Promoted video IDs” theme setting. The source code can be found within the extension-video-library.(min.)js file in the theme’s Assets folder.

If you do not use the “Promoted video IDs” theme setting but wish to create a Video Library instance elsewhere in the help center, add a reference to it in your theme’s footer.hbs template:

<script type="text/javascript" src="{{asset 'extension-video-library.min.js'}}" defer></script>

Our themes allow you to add a list of videos on the Home page using theme settings.

  1. In Zendesk Guide, click the Customize design icon (Customize icon) in the sidebar.

  2. Click Customize on the theme you want to edit.

  3. Expand the Home page elements section and add one or more YouTube video IDs to the Promoted video IDs setting in a comma-separated list. You can add an optional heading using the Promoted videos heading setting.

The default layout used varies from theme to theme, but you can change it by editing the Home page (home_page.hbs) template or by copying-and-pasting your own custom micro-template or video library pattern into the theme.

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

<div data-element="video-library" data-ids="..."></div>

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

The Video Library extension can be initialized using JavaScript:

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

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    new VideoLibrary(document.getElementById('video-library'), {
      // 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 micro-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 theme settings.

Custom micro-templates

Video metadata is loaded after the main extension 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.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Carousels Free

Carousels

Present content in well-defined and easy to follow steps.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.