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

Forum|Forum|12 years ago
October 11, 2013
112 replies
0 views

ModeratorWes

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.

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">

<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

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"

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>
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

Show first post

This topic has been closed for replies.

Forum|pagination.label 5 / 5

Akhilesh
Forum|Forum|7 years ago
July 17, 2018

Hi @Wes Drury - Thanks for this tutorial. I have follow the instructions that available in this tutorial. I can see the video in editor. But video not display when I open the article in Help Center. When I inspect the elements, the <video> tag not displaied in the article.

Steps I follow:

1. Added the VideoJs CSS and JS file in Document Head

2. Upload the MP4 video in my server and added the video URL on source tag

3. Upload the PNG poster in server and added the URL with poster param

Could you please help me to solve this issue?

Thanks

ModeratorWes
Author
Forum|Forum|7 years ago
July 17, 2018

@Akhilesh PV - Please make sure in your Guide settings that you checked the box for "Display Unsafe Content". Let me know if that helps at all.

Akhilesh
Forum|Forum|7 years ago
July 18, 2018

Hi @Wes Drury - Thanks for your support. its working now.

Thanks...

Dolev
Forum|Forum|7 years ago
November 18, 2018

Hi! :-)

Am I correct in assuming that we need to be in the Guide Professional plan and above to enable this?

Nicole17
Forum|Forum|7 years ago
November 19, 2018

Hi Dolev -

That's correct. You'd have to be able to customize your Guide, which is not available on the Essential plan.

Melissa44
Forum|Forum|6 years ago
April 11, 2019

The instructions given here are pretty out of date with the current Customize Design UI. I have the Guide Professional license, and I have enabled Unsafe HTML.
Can this article please be updated? I am trying to use this method to embed playable video into Guide articles to be served via web widget. thanks!

Brett13
Community Manager
Forum|Forum|6 years ago
April 12, 2019

Hi Melissa,

This is actually a Support Tip created by one of our Community Members so I can't guarantee that this will be updated by the original poster. However, we do have our own article that goes over inserting videos in articles here: Inserting videos in articles

I'll also reach out directly to the moderator to see if we can get this information updated as well :)

Thanks for bringing this to our attention!

Jennifer16
Forum|Forum|6 years ago
April 12, 2019

I just updated the steps in Step 1.

The UI has definitely changed since Wes wrote this, so I just copy/pasted the updated steps from the docs.

Hope that helps! Thanks for letting us know.

Melissa44
Forum|Forum|6 years ago
April 19, 2019

I am testing embedding a password-protected Vimeo video that we have been linking to our legacy docs for a while now into a Guide article. Because the toolbar "embed video" function only lets you use a URL, not a full embed code div, I just took the embed code from the Vimeo's site and pasted it into the page source manually. The video embeds and plays perfectly. I gave the article two labels to make sure it would be easy to find, and I set the permissions to be viewable by signed-in users and published it, but even logged in as an admin user, I cannot find the article via search.
However, this article seems to be completely unsearchable in our help center, even though it is listed among the articles in its Section of our HC. The article is also not findable via the web widget in our product (which is currently using an admin/agent user to run its searches.)
I have enabled Unsafe HTML, and added the video.js code to our theme's Document Head section, per the instructions in this article. Please help.

Brett13
Community Manager
Forum|Forum|6 years ago
April 25, 2019

Hey Melissa,

That definitely sounds like odd behavior here. I'm going to create a ticket on your behalf so I can troubleshoot further on my end. I'll most likely need to assume into your account so if you can use the following instructions to enable this feature that would be super helpful: Granting Zendesk temporary access to your account

You'll receive an email shortly stating your ticket has been created so feel free to reply back to that with the article labels you're using as well as a direct link to the article that should display after completing your search.

Thanks!

Melissa44
Forum|Forum|6 years ago
April 25, 2019

Hi Brett! I actually already have a ticket open with your Support team for this issue, ticket # 4500585.

Brett13
Community Manager
Forum|Forum|6 years ago
April 25, 2019

Thanks for the heads up Melissa!

I'll go ahead and merge my ticket in with your existing ticket to make things less confusing :)

Looks like it's been escalated to our Tier 2 support team so they'll reach out and assist further.

Forum|pagination.label 5 / 5

Let’s Get Started

That's it!

Sign up

Login to the community

Scanning file for viruses.

This file cannot be downloaded