Embed Videos in Help Center Articles with Two Easy Steps (using video.js)

Zendesk level:  Beginner
Knowledge:  HTML
Time Required:  10 minutes

Updated:  07/24/14 - Latest version of CDN 4.6

Updated:  11/20/15 - Latest version of CDN 5.2.1

Updated: 05/16/18 - Latest version of CDN 6.9.0

This tutorial will show you how you can embed your company’s help videos into the Help Center.  We will accomplish this in two easy steps and without uploading any files into Help Center. 

In researching what video player to use I decided to use Video.js as it’s very simple to use, open source, 100% percent free to everyone, HTML5-works in all browsers, and they host their CSS & JavaScript files. 

Let’s Get Started

STEP 1

First let’s add the Video.js CSS and JavaScript code in your “Document Head” section of your site.

1. In Guide, click the Customize design icon in the sidebar.
2. Click the theme you want to edit to open it.
3. Click Edit Code.
4. In the Templates section, open the document_head.hbs template.
5. Add the following code, replacing with links to own content:
   

   <link href="https://vjs.zencdn.net/6.9.0/video-js.css" rel="stylesheet">

   <script src="https://vjs.zencdn.net/6.9.0/video.js"></script>

 Screenshot below is an example of what it should look like.  Please note the older version being used.

STEP 2

1. In the top menu bar, select  Articles > Add Article.
2. Click the html button in the article toolbar.
3. Copy and paste the following code:
   

   <video id="example_video_1" class="video-js vjs-default-skin"

     controls preload="auto" width="600" height="264"

     poster="https://video-js.zencoder.com/oceans-clip.png"

     data-setup='{"example_option":true}'>

    <source src="https://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />

    <source src="https://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />

    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />

   </video>

4. Click Add to publish your article and view the video.

You can edit the width and height. Remember that you will need to need to replace https://video-js.zencoder.com/oceans-clip.xxx with the link to your video.

That's it!

In just two easy steps you can embed your own help videos into the articles. If you want to get advanced you can customize the CSS and HTLM for the video player.  See the Video.js website for additional details on how to do this.

Enjoy.

• HC-Video.png
• HC-Video-DH.png
• HC-Video-Article.png