English (US)

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

ModeratorWes
Most Engaged Member of All Time - 2021

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

Note the following before you begin:
  • To embed videos in your articles, you must first enable unsafe HTML in pages.
  • The links below are examples of videos. You'll need to replace these links with your own content.
  • Use the method described in this tip if you are not using a public hosted video service, such as Wistia or YouTube.

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 theCustomize designicon in the sidebar.
  2. Click the theme you want to edit to open it.
  3. ClickEdit Code.
  4. In theTemplatessection, open thedocument_head.hbstemplate.
  5. Add the following code, replacing with links to own content:

截图是应该l的一个例子ook like. Please note the older version being used.

STEP 2

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

    <视频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}'>

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

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

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

  4. ClickAddto publish your article and view the video.

You can edit the width and height. Remember that you will need to need to replacehttps://video-js.zencoder.com/oceans-clip.xxxwith 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

112 Comments

  • Ryan FitzGerald

    We used the YouTube embed script but were disappointed that we couldn't get a nice thumbnail showing.

    By inserting _class="youtubeframe" _to the YouTube embed code like so

    _