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

112 Comments

  • JoshGlessner
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • JoshGlessner
    Comment actions Permalink

    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?

    0
  • Laura Hippert
    Comment actions Permalink

    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. 

    0
  • Alan Oehler
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

    @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

    0
  • Wes Drury
    Comment actions Permalink

    @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'>
    0
  • Alan Oehler
    Comment actions Permalink

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

    0
  • Jessie Schutz
    Comment actions Permalink

    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!

    0
  • Alan Oehler
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • ludovic
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Keiron Smith
    Comment actions Permalink

    Thanks Wes for all your help here!

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Keiron Smith
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Ryan Burke
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

    @Ryan did you make sure to do the following:

    Before you can embed videos in your articles, you must enable unsafe HTML in pages

    0
  • Ryan Burke
    Comment actions Permalink

    @Wes Yes it is enabled.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Ian Sampson
    Comment actions Permalink

    The option doesnt appear to be available for the Community section of the help section, any idea how customers an post their videos?

     

    0
  • Jessie Schutz
    Comment actions Permalink

    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.

    0
  • Jonathan
    Comment actions Permalink

    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?

    0
  • Jessie Schutz
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Jonathan
    Comment actions Permalink

    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.

    0
  • Jessie Schutz
    Comment actions Permalink

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

    0
  • Jonathan
    Comment actions Permalink

    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.

    0
  • Sébastien ROUL
    Comment actions Permalink

    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

    0

Post is closed for comments.

Powered by Zendesk