Recent searches
No recent searches
Embed Videos in Help Center Articles with Two Easy Steps (using video.js)
Posted Oct 11, 2013
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
- 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
0
112 comments
Elizabeth Washington
@Wes - I know this article is a bit old, but I was trying to implement your suggestion regarding the video icon showing on help articles that contain the word video. I have added the code you indicated in the document head, css and js but I am not seeing anything. Any suggestions on how to troubleshoot this further? Really appreciate your help!
0
Jessie Schutz
Hey Sébastian!
Thanks for the heads up on this! I'll send it over to our Documentation team so they can take a look. :)
0
Sébastien ROUL
Ok super, since this article was written browser's security evolved a lot 😀
0
Shanti de Ruyter
You have an error in your instructions:
0
ModeratorWes
@Shanti - Thanks for catching the error :-)
0
David
Where and in what format does the video need to be stored in order to be able to embed it like this?
0
Nate Legakis
Is all this necessary if I just want to embed a vimeo video with an iframe?
0
Jennifer Rowe
Hi Nate,
No, you don't need to do this if your video is hosted on Vimeo.
To add that video to an article, you just need to paste the embed code into the source code of the article.
Good luck!
0
Sunee Lewitzky
Hey @Wes. Thanks for this tutorial! I have a quick question. We only offer our product via our mobile (IOS) app, and so that is where most of our customer base views help articles. We are starting to put videos in the articles and have been hosting them on Youtube, but I am looking for an unbranded solution.
From what I can remember, HTML videos will not play on IOS unless they are in an iFrame, is that correct? (Because there is no flash player)
If so, do you have any other suggestions for embedding videos that do not require HTML and will be mobile friendly?
0
ModeratorWes
@Sunee - Sorry I'm not an expert on videos or IOS so I don't know all the rules. I'm sure there is something out there that will meet your needs if the solution I provided does not work.
0
Akhilesh PV
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
0
ModeratorWes
@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.
0
Akhilesh PV
Hi @Wes Drury - Thanks for your support. its working now.
Thanks...
0
Dolev Zemer
Hi! :-)
Am I correct in assuming that we need to be in the Guide Professional plan and above to enable this?
0
Nicole Saunders
Hi Dolev -
That's correct. You'd have to be able to customize your Guide, which is not available on the Essential plan.
0
Melissa Lanning
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!
0
Brett Bowser
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!
0
Jennifer Rowe
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.
0
Melissa Lanning
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.
0
Brett Bowser
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!
0
Melissa Lanning
Hi Brett! I actually already have a ticket open with your Support team for this issue, ticket # 4500585.
0
Brett Bowser
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.
0