Zendesk level: Beginner
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
- 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.
Let’s Get Started
- In Guide, click the Customize design icon in the sidebar.
- Click the theme you want to edit to open it.
- Click Edit Code.
- In the Templates section, open the document_head.hbs template.
- Add the following code, replacing with links to own content:
<link href="https://vjs.zencdn.net/6.9.0/video-js.css" rel="stylesheet">
Screenshot below is an example of what it should look like. Please note the older version being used.
- In the top menu bar, select Articles > Add Article.
- Click the html button in the article toolbar.
- Copy and paste the following code:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="600" height="264"
<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' />
- 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.
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.
Please sign in to leave a comment.