Embed Videos in Help Center Articles with Two Easy Steps (using video.js)
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
-
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
_<iframe class="youtubeframe" _...
We now have the YouTube previews that we wanted.
-
@Ryan - Thanks for the tip as I'm sure it will come in handy with others posting youtube videos.
-
Hi everyone. We use Brightcove to host all of our video assets. Is there a way to use their embed code to have a video show up in one of our articles?
-
Hi Tim - If they give you embed code then just select the "View Source" which the last button on the editor and copy and paste the code into there. If all goes well then you should see the video. Let me know if this helps.
Note: Before you can embed videos in your articles, you must enable unsafe HTML in pages.
-
@Wes thanks for the quick reply. Unfortunately that is not working for us. We tried those exact steps before I posted the question. Any other thoughts?
-
@Tim - Sorry but I'm not familiar with Brightcove. Did you try to change the link to https: as I've seen where sometimes Zendesk will not allow non-secure content.
-
This is not working, I think I did all the steps right but the video isn't appearing live on the page. It does appear in the editor though.
-
@Charles - Did you make sure to enable unsafe HTML in pages. This will not work unless this is enabled.
-
Hi Wes,
I'm trying to get the video label showing in my article title but it doesn't seem to be working. I've copied all the codes in place and added the "Video:" tag in my title. Anything else I could try? Thanks!
-
@Manuel - Are you trying to add a video to your article or are you referring to a different set of code that I wrote that shows icons next to the article titles.
-
Yes, I’m referring to the set of code you wrote that shows icons next to the article titles. Thanks
-
@Manuel - Remove any CSS/JS code that you have added. Make sure you call the FontAwsome CDN inside of your document head and then add the following code:
https://gist.github.com/moderatorwes/9f20dabd77e4257887a9
For the title of your article call it Video: Title goes here.
The code searches for video: and then hides it from the end user view and then adds the icon beside it. Give this a try and let me know if you run into further issues.
-
ok thanks Wes! This is the code I have in my document head:
<!-- Font Awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">Can you tell me how to modify it?
Thank you.
M.
-
@Manuel - Just needs updating to the newest version.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
After that copy the CSS code to your CSS tab, then copy the JS code to your JS tab and paste it below the $document.ready function
-
Ok so I think I did everything but the Video: tag still won't be replaced by the icon. Here are 3 screenshots of my document head, css and JS tabs:
https://www.dropbox.com/s/3ycmpseol54zgfs/Screenshot%202015-02-25%2013.29.37.png?dl=0
https://www.dropbox.com/s/4dkjag6ngyn4zwb/Screenshot%202015-02-25%2013.29.16.png?dl=0
https://www.dropbox.com/s/ng5ik1d5yydumzc/Screenshot%202015-02-25%2013.26.20.png?dl=0
Is there anything wrong?
-
@Manuel - I don't think your JS is getting called. I see you copied the JS to the end of the file which is causing the issue. Remove what you have and paste it right up under the $document.ready
-
Yep, working just fine now. Thanks!
https://www.dropbox.com/s/k4uxyw1n51w6now/Screenshot%202015-02-25%2013.45.43.png?dl=0
-
@Manuel - Awesome, good to hear. You can use any icon that you like by finding the icon here:
http://fortawesome.github.io/Font-Awesome/icons/
Click on the icon you want and right below the icon you will see
Unicode: f03d
Take that code f03d and plug it into your CSS:
content: "\f1c8";
You can also adjust the color which is the next line down.
-
Thanks, I already changed it for the video camera!
https://www.dropbox.com/s/t9h7b67v0ucsf6m/Screenshot%202015-02-25%2014.23.49.png?dl=0
And what about if I wanted to be able to use more than one icon with other tag words? What would I have to do?
-
Pretty much just copy and paste the code and then edit the code to do whatever key word that you would like. You also would need to add the CSS code for the new icon.
-
Awesome thanks! Another question: where can I edit the text (Search) displayed in the background of the search box field on the home page of my help center?
https://www.dropbox.com/s/3dlqv7buoha8hqb/Screenshot%202015-02-25%2015.30.57.png?dl=0
-
@Manuel - This article will walk you through the steps.
Take a look here for all of my code and also my Gist page has alot of custom JS/CSS.
-
@Wes - I ran into another issue with my customizations.
Following you instructions I copied two sets of codes in my JS under the "$(document).ready(function() {" line, one for the Video: icon and one for the search box placeholder.
My problem is that only the customization with the code directly under that line is working and not the ones that come right below. I'm pretty sure it's just a question of misplaced punctuation in the code but I'm not familiar enough to find what and where.
Can you help? Below are the first 20 lines of my JS tab.
Thanks!
/*
* jQuery v1.9.1 included
*/$(document).ready(function() {
//Find Video: replace with video icon in Article List
$('ul.article-list li').html(function (i, t) {
return t.replace('Video:', '<span class="video"></span>');
$('#query').attr('placeholder','Search AQUAOVO Support');if(currentLanguage === 'Français') {
$('input').attr('placeholder','Recherche Support AQUAOVO');}
});// social share popups
$(".share a").click(function(e) {
e.preventDefault();
window.open(this.href, "", "height = 500, width = 500");
}); -
@Manuel - It should be like this, you are missing an end bracket.
//Find Video
$('ul.article-list li').html(function(i, t) {
return t.replace('Video:', '<span class="video"></span>');
});//Change Search Placeholder
$('#query').attr('placeholder', 'Recherche Support AQUAOVO');I will need to play around with the language code as I need to enable it for my account but you should be able to do something like below and could remove the last line of code however the above code was tested and verified to work. I need to work on the below code as I cannot verify it as working as of yet but you can give it a try if you would like.
if (currentLanguage === 'Français') {
$('#query').attr('placeholder', 'Recherche Support AQUAOVO');
}
else {
$('#query').attr('placeholder', 'Search AQUAOVO Support');
} -
@Wes - So I got the icon and the English search placeholder to work both at the same time with the code you gave me but the French translation still won't show after I tried a few more options.
Let me know if you find how to make this work.
Here's the active code I have now:
//Find Video
$('ul.article-list li').html(function(i, t) {
return t.replace('Video:', '<span class="video"></span>');
});
//Change Search Placeholder
$('#query').attr('placeholder', 'Search AQUAOVO Support');
if (currentLanguage === 'Français') {
$('#query').attr('placeholder', 'Recherche Support AQUAOVO');
}
-
Hi Wes
I have the code in place and have your video working in our help centre.
However, I have no idea how to get my video on there?
Am I supposed to upload it via Video.js? I can't see any areas to do this.
I've also clicked the 'Get Started' link on the Video.js page and it asks to download a RAR file, i did and none of the attached files I got worked?
Can you help as I need to get this video up ASAP.
Thanks
Daragh
-
@Daragh - You don't need to download any RAR files as we are using the CDN so all you need to do is add the two lines of code in the Document Head. Once that is in place you are good to go. You will need to upload the videos to your Assets area and then link to them or you can link to them from any external website that you upload them to.
-
Hi Wes!
Thanks for the code. I currently am working on embedding some videos into our posts, and I seem to be stuck.
I pasted the code in that was in your article, and now I have a goofy situation. The audio is playing, but the video is stuck on a black screen (below).
The code I have in there is: <video id="" class="video-js vjs-default-skin" poster="" preload="auto" controls="controls" width="600" height="264" data-setup="{"example_option":true}">
<source src="https://s3.amazonaws.com/efk-live/video/webinars/affectivedomain.mp4" type="video/mp4" />
<source src="https://s3.amazonaws.com/efk-live/video/webinars/affectivedomain.webmhd.webm" type="video/webm" />
<source src="https://s3.amazonaws.com/efk-live/video/webinars/affectivedomain.oggtheora.ogv" type="video/ogg" />
</video>
What did I do wrong?
Thanks!
-
@JGlessner - Two things to check. Make sure you have the latest version located in the Document Head.
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/4.12/video.js"></script>
Also make sure that you have "Unsafe Content" checked in your settings.
Post is closed for comments.
112 Comments