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:
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.
-
In Zendesk Guide, click the Customize design icon (
) in the sidebar. -
Click Customize on the theme you want to edit.
-
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">
ready(function() {
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 | stringnull | 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 titledata-description="<%= id %>"for the video descriptiondata-duration="<%= id %>"for the formatted video durationdata-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. |
