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

112 Comments

  • Ryan FitzGerald
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

    @Ryan - Thanks for the tip as I'm sure it will come in handy with others posting youtube videos.

    0
  • Tim Malo
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    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

    0
  • Tim Malo
    Comment actions Permalink

    @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?

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Charles Curry
    Comment actions Permalink

    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.

    http://screencast.com/t/xmp6Xsam

    0
  • Wes Drury
    Comment actions Permalink

    @Charles - Did you make sure to   enable unsafe HTML in pages. This will not work unless this is enabled.

    0
  • Manuel
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Manuel
    Comment actions Permalink

    Yes,  I’m referring to the set of code you wrote that shows icons next to the article titles. Thanks

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Manuel
    Comment actions Permalink

    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.

     

    0
  • Wes Drury
    Comment actions Permalink

    @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

    https://gist.github.com/moderatorwes/9f20dabd77e4257887a9

    0
  • Manuel
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    @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

    0
  • Manuel
    Comment actions Permalink

    Yep, working just fine now. Thanks!

     

    https://www.dropbox.com/s/k4uxyw1n51w6now/Screenshot%202015-02-25%2013.45.43.png?dl=0

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Manuel
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • Manuel
    Comment actions Permalink

    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

    0
  • Wes Drury
    Comment actions Permalink

    @Manuel - This article will walk you through the steps.

    https://support.zendesk.com/hc/communities/public/posts/203458866-Help-Center-Change-default-placeholder-text-in-your-Search-Box

    Take a look here for all of my code and also my Gist page has alot of custom JS/CSS.

    https://support.zendesk.com/hc/communities/public/posts/203458536-Help-Center-community-tips?locale=en-us

    0
  • Manuel
    Comment actions Permalink

    @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");
    });

    0
  • Wes Drury
    Comment actions Permalink

    @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');
    }

    0
  • Manuel
    Comment actions Permalink

    @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');

    }

    0
  • Daragh Everett
    Comment actions Permalink

    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

    1
  • Wes Drury
    Comment actions Permalink

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

    0
  • JoshGlessner
    Comment actions Permalink

    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="{&quot;example_option&quot;: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!

    0
  • Wes Drury
    Comment actions Permalink

    @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.
    0

Post is closed for comments.

Powered by Zendesk