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

112 Comments

  • Wes Drury
    Comment actions Permalink

    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
  • Andrew Byrne
    Comment actions Permalink

    Hi 

    I am just wondering where you uploaded your video to ? 

     

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • jeraline reynoso
    Comment actions Permalink

    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
  • 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

Post is closed for comments.

Powered by Zendesk