Recent searches


No recent searches

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



image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

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

 
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.

  1. In Guide, click the Customize design icon in the sidebar.
  2. Click the theme you want to edit to open it.
  3. Click Edit Code.
  4. In the Templates section, open the document_head.hbs template.
  5. 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

  1. In the top menu bar, select  Articles > Add Article.
  2. Click the html button in the article toolbar.
  3. 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>

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

112 comments

The Youtube embed script would also work for this, right? But I see your approach with making this responsive friendly.

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Andrea - yes the embed youtube script would work for this but this is more geared  to in-house videos.  For us we can't post videos to youtube as it would break our contracts with our third party vendors.  Yes can you tell I'm all about making everything responsive :-)  

0


Thank you! This was very helpful as we a restriction on using YouTube videos as well. I had to adapt this to use with V1 of ZenDesk.  If there's a better way to do the following, let me know.

Head into the Settings -> Extensions 

Make or edit a global CSS widget and added the following to the top:

    @import url('//vjs.zencdn.net/4.2/video-js.css');

Make or edit a global JS widget and added the following:

    var js = document.createElement("script");
    js.setAttribute("type", "text/javascript");
    js.setAttribute("src", "//vjs.zencdn.net/4.2/video.js");
    document.getElementsByTagName("head")[0].appendChild(js);

Update the URL to get the version you want.

Thanks again!

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Matt - Your welcome and I'm glad it helped.  Thanks for sharing your code as well.

0


I did everything you said, but for some reason when I am in the editor in HTML mode when saving, the code gets changed.  Look at the attached "zendesk_before_update.png".  This is the code that you suggest to copy and paste.  I paste it, click update, the video does not appear.  I click "edit" to see the code, and as you see in "zendesk_after_update.png" the HTML editor keeps changing the code.  Can you make the editor not change the code?

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Steve - Did you make sure you did the following:  you must  enable unsafe HTML in pages

0


Thank you Wes, that did the trick.  I guess I missed that at the top of the article.  Kind of screwy that Zendesk would make a user make all unsafe tags enabled, when all I need is the single quote.

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Steve - Glad it helped just let me know if you run into any other issues.

0


Is there a better way to indicate in the article title that there is a video in the article? We want to make it easy for users to identify video content from the article list? Currently we are putting [Video] at the beginning of the title but an icon would be preferable.

0


0


image avatar

Jennifer Rowe

Zendesk Documentation Team

Thanks for pointing that out, Cheryl. I think it will only work for Web portal, though, not Help Center. I'd love to have the HC version of that tip! Love those little video icons. 

0


Oh shoot - thanks Jennifer, I forgot that. Wes??  ;)

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Jamie - I will post some code that will allow you to do this.  Let me do some testing and I'll post it as soon as I can.

0


Sounds great Wes! If you have a little document one for PDFs too, that'd be dreamy! :)

0


Wes is the HC King!

0


image avatar

Jennifer Rowe

Zendesk Documentation Team

Indeed--Wes is the HC King! It'll be great to have this code for HC.

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

Almost there, just gotta work on the spacing a little.  This may become easier once labels are implemented in the Help Center as we may be able to search for the label and then apply the icon.  For now the only way I can think of is to keep the word "Video:" in the Title as there is no other way you can identify which articles contain the videos.  Here is what I have so far.  Let me know if this looks ok and you can any icon that you would like.

0


Hey Wes, 

 

Thanks for this. If it makes any difference, we have labels turned on and all of our video articles are already labeled with video. Would there be a better way of doing this with that in mind? If not, this would definitely work in the interim. 

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Jamie - Since the labels concept is new I'm not sure what the code would be to use that however I will ask Jennifer to reach out to someone so the code below will work in the meantime.  Just make sure the word "Video:" exist in your article title.  I'm using FontAwesome for the icons as thats what I always use since its easy to integrate.

Document Head (calls the CSS for the icons)
<!-- Font Awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

CSS
.video:before{
content: "\f03d";
color: #a83030;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 18px;
}

If you would like to change your icon then look on the below list and put in the
icon code for content: " "

http://astronautweb.co/snippet/font-awesome/
You can also change the color of the icon and size if needed.

JS
$('ul.article-list a:contains("Video:")').addClass('video');

Let me know if you run into any issues.

0


Hey Wes,

 

Seeming to have some issues getting it to work. Could you take a look? 

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

Sure thing can you shoot me over a link or if its private you can shoot me an email wes@cibertec.net

0


I use S3 and build players from EZS3. Have you any guidance for this situation?

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

Hi Daniel - I'm sorry but I'm not familiar with S3 or EZS3.  Does it produce any code that you can copy like YouTube.

0


hi, i have the 'starter' version of zendesk help centre. i have changed the setting to 'display unsafe content' however i cannot successfully embed youtube video into my article. it shows the video as being embedded whilst i am editing the article, however after publishing the article it is not visible. https://enertionboards.zendesk.com/hc/en-us/articles/201826400-How-to-install-skate-trucks-

 

note: currently i must link back to my website so people can view the video.

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

Give this a try, make sure that you click on the <> button so that you can insert the following code.

<iframe width="560" height="315" src="//www.youtube.com/embed/Z4kh0Ufzjvc" frameborder="0" allowfullscreen></iframe>

0


hi, thanks for the code, (yes i was using <>)

your code worked..... so why did it work? you only removed the "?rel=0"  why would that make a difference?

does zendesk not allow the related videos to play?

 

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

Not sure why it worked but I got the following code by going to YouTube and then clicking the "Share" button.  It gave me the code above.  Glad it worked.

0


Hi 

I am just wondering where you uploaded your video to ? 

 

0


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Andrew - we upload or videos to one of our internal servers

0


Want to spruce up those "help" articles? What better way to do so than with an accompanying video. And this shows you how--in two easy steps, no less. Good luck.

0


Post is closed for comments.

Didn't find what you're looking for?

New post