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
ludovic
@Wes - Hi
I have a link to a video on our google drive.
I allowed unsafe html in the document head.
How do I include the URL to the video in the code so it's embedded?
0
ModeratorWes
@Alan - This tutorial was really written when you have internal videos like mp4,webm, and obv video extensions. We host our own videos on our internal servers as we can't post them to youtube. This video player works perfect for that type of scenario as we use this tool today in our Help Center. If you want to use YouTube videos then you can just embed the youtube player straight into your article as you don't need this player.
0
Alan Oehler
@Jessie, thanks. Shouldn't the upload control tell me a file is too big, rather than apparently create an empty file there in the Assets folder?
And @Wes, modifying the link to the video on Google Drive made no difference; the video player just spins and spins as if it's loading something. I also had no luck trying to play a video off our YouTube account.
0
Jessie Schutz
Hey Alan!
The size limit for asset files is 50MB regardless of what plan you're on. So in this particular case your upload would have failed because of the file size.
Hope that helps!
0
Alan Oehler
@Wes, thanks! Yeah, unsafe HTML is enabled. I'll take a look at modifying the Google Drive link. The one in the assets folder turned out to have failed to upload completely and was just an empty file. I tried again with a short video and that worked fine. Is there a limit on the size of files one can upload to the Assets folder? The first video I tried was about 60 MB.
0
ModeratorWes
@Alen - another thing that I read about Google Drive.
Yo can modify the Google Drive URL to get a direct link - see e.g. http://www.labnol.org/internet/direct-links-for-google-drive/28356/
0
ModeratorWes
@Alan - Did you ensure that you you "enable unsafe HTML in pages". I also updated the version information so make sure you use 5.2.1 in your document head
0
Alan Oehler
I tried with a video located in my Google Drive. I set it so it is visible to anyone with the link, and used the link in the video player src attribute. But it doesn't play or offer any visible error, it just spins and spins as if it's buffering the file. The same thing happens if I upload a video to our Help Center's Assets area.
0
Laura Hippert
Hi @jglessner - I'd love to look into this further for you! I've created a ticket for you from support@zendesk.com and you should have received an email.
0
JoshGlessner
You can see them fine on your end? Are you in Chrome?
Hmmm, they work in firefox...dangit. What could be causing this in Chrome?
0
Post is closed for comments.