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
-
Hi Wes! Thanks for the quick response.
No dice. I copied and pasted the code above, and confirmed that unsafe content is checked. Still staring at a black screen with the audio playing.
https://efksupport.zendesk.com/hc/en-us/articles/205259089
Our videos are hosted on s3. I have made the links public. Anything else to try?
-
I don't know of anything else to try as it seems to be working fine on my end and I'm not able to log into your Help Center so I can check the code. Do you get the same result on a different browser.
-
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?
-
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.
-
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.
-
@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
-
@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/
<source src="https://drive.google.com/uc?export=download&id=0B-zKk5F6hm6rOXJicnBSOHIyd28" type='video/mp4'> -
@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.
-
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!
-
@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.
-
@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.
-
@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?
-
@ludovic - I would assume Google Drive should give you some embed code, just paste that code into your Help Center article using the "Source icon" which should be the last icon on the right hand side of the editor.
-
Thanks Wes for all your help here!
-
@Kieron - Its my pleasure to be able to help and assist in any way that I can. :-) If you ever need anything just let me know.
-
Initially I just wanted to add Youtube videos, and found your repeated instructions regarding the unsafe html option. But, also, embed code must be entered via the <> source code! Thanks for that!
But, I also used your code here - and WOW what a bonus! I hadn't thought about doing this until reading through the thread here.
https://gist.github.com/moderatorwes/9f20dabd77e4257887a9
Now, adding the Font Awesome YouTube icon to all relevant lists, titles and search results :) Makes for a very clean, eye-catching, short-hand for video resources on the site!
Thanks so much! -
@Keiron - Glad to hear that you found some of my other tips and tricks useful. My notification tip uses article labels and the API to display notifications so eventually I will get around to updating the icon tip so you could just put a label on the article and it would add the icon based on the label. Just have alot on my plate right now but I will get to it at some point in time. Best of luck customizing your Help Center as it sounds like you are on your way to great looking HC.
-
I am having an issue where the video player is visible, but there is no sign of a playable video. The only two things I did was
copy and paste those two bits of code. -
@Ryan did you make sure to do the following:
Before you can embed videos in your articles, you must enable unsafe HTML in pages.
-
@Wes Yes it is enabled.
-
@Ryan - Did you link to one of your own videos as the links in my code were just an example which they may have moved.
-
The option doesnt appear to be available for the Community section of the help section, any idea how customers an post their videos?
-
Hey Ian!
The community area isn't set up to embed videos...customers would need to upload their videos to an online service and provide a link in their post.
-
I have been able to get it working, however, the player has the option to download the video which I would like to remove.
is there any way to avoid the video player offering the download option?
-
Hey Jonathan!
I'm fairly certain that this would be controlled through whatever service you're using to host the videos, but Wes might need to correct me on that...
-
@Jonathan - Jessie is correct, do a search for Video.JS remove download and I'm sure there is some JQuery that you can use that will disable that option.
-
Hi Jessie/Wes many thanks for your messages.Yes it is controlled by the video.js player. I have searched for that unsuccessfully so far. If you are aware of any solution please let me know.
I have also noticed that the download option is only available in chrome because in safari and explorer there's no download button.
-
Hey Jonathan,
I believe that at least some video hosting services actually have a setting that you can change to indicate whether or not you want people to be able to download your videos. So it might be worthwhile to look for that.
Have you tried actually downloading the video through Chrome? Maybe from an incognito window? It could be that the option to download shows up in Chrome but won't actually let you download the video...
-
We have uploaded the video to zendesk assets and used the video.js player to display them within our help centre, we don't use any video hosting. It works perfectly however when watching the video in chrome the download button is available in the player and unfortunately it does work and allow you to download the video, which we would like to avoid.
I guess that the only option would by try with a different version of the player but I have tried several versions and the download option is always present in chrome.
-
Hi,
Please could you upgrade this article and write "https" (and not http) for all the links ? Chrome doesn't like http over https, and as I didnt notice it at the first time our helpcenter was considered as "dangerous" by Chrome #NotGoodForOurClient :)
Thx
Post ist für Kommentare geschlossen.
112 Kommentare