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

112 Comments

  • Elizabeth Washington
    Comment actions Permalink

    @Wes - I know this article is a bit old, but I was trying to implement your suggestion regarding the video icon showing on help articles that contain the word video. I have added the code you indicated in the document head, css and js but I am not seeing anything. Any suggestions on how to troubleshoot this further? Really appreciate your help!

    1
  • Jessie Schutz
    Comment actions Permalink

    Hey Sébastian!

    Thanks for the heads up on this! I'll send it over to our Documentation team so they can take a look. :)

    2
  • Sébastien ROUL
    Comment actions Permalink

    Ok super, since this article was written browser's security evolved a lot 😀

    0
  • Shanti de Ruyter
    Comment actions Permalink

    You have an error in your instructions:

    <link is duplicated.

    0
  • Wes Drury
    Comment actions Permalink

    @Shanti - Thanks for catching the error :-)

    0
  • David
    Comment actions Permalink

    Where and in what format does the video need to be stored in order to be able to embed it like this?

     

    1
  • Nate Legakis
    Comment actions Permalink

    Is all this necessary if I just want to embed a vimeo video with an iframe?

    0
  • Jennifer Rowe
    Comment actions Permalink

    Hi Nate,

    No, you don't need to do this if your video is hosted on Vimeo.

    To add that video to an article, you just need to paste the embed code into the source code of the article.

    Good luck! 

    0
  • Sunee Lewitzky
    Comment actions Permalink

    Hey @Wes. Thanks for this tutorial! I have a quick question. We only offer our product via our mobile (IOS) app, and so that is where most of our customer base views help articles. We are starting to put videos in the articles and have been hosting them on Youtube, but I am looking for an unbranded solution.

    From what I can remember, HTML videos will not play on IOS unless they are in an iFrame, is that correct? (Because there is no flash player)

    If so, do you have any other suggestions for embedding videos that do not require HTML and will be mobile friendly?

    0
  • Wes Drury
    Comment actions Permalink

    @Sunee - Sorry I'm not an expert on videos or IOS so I don't know all the rules.  I'm sure there is something out there that will meet your needs if the solution I provided does not work.

    0
  • Akhilesh PV
    Comment actions Permalink

    Hi @Wes Drury - Thanks for this tutorial. I have follow the instructions that available in this tutorial. I can see the video in editor. But video not display when I open the article in Help Center. When I inspect the elements, the <video> tag not displaied in the article.

    Steps I follow:

    1. Added the VideoJs CSS and JS file in Document Head

    2. Upload the  MP4 video in my server and added the video URL on source tag

    3. Upload the  PNG poster in server and added the URL with poster param

    Could you please help me to solve this issue?

    Thanks

    0
  • Wes Drury
    Comment actions Permalink

    @Akhilesh PV - Please make sure in your Guide settings that you checked the box for "Display Unsafe Content".  Let me know if that helps at all.

    0
  • Akhilesh PV
    Comment actions Permalink

    Hi @Wes Drury - Thanks for your support. its working now.

    Thanks...

    0
  • Dolev Zemer
    Comment actions Permalink

    Hi! :-)

    Am I correct in assuming that we need to be in the Guide Professional plan and above to enable this?

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi Dolev -

    That's correct. You'd have to be able to customize your Guide, which is not available on the Essential plan.

    0
  • Melissa Lanning
    Comment actions Permalink

    The instructions given here are pretty out of date with the current Customize Design UI. I have the Guide Professional license, and I have enabled Unsafe HTML. 
    Can this article please be updated? I am trying to use this method to embed playable video into Guide articles to be served via web widget.  thanks!

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hi Melissa,

    This is actually a Support Tip created by one of our Community Members so I can't guarantee that this will be updated by the original poster. However, we do have our own article that goes over inserting videos in articles here: Inserting videos in articles

    I'll also reach out directly to the moderator to see if we can get this information updated as well :)

    Thanks for bringing this to our attention!

    0
  • Jennifer Rowe
    Comment actions Permalink

    I just updated the steps in Step 1.

    The UI has definitely changed since Wes wrote this, so I just copy/pasted the updated steps from the docs.

    Hope that helps! Thanks for letting us know.

    0
  • Melissa Lanning
    Comment actions Permalink

    I am testing embedding a password-protected Vimeo video that we have been linking to our legacy docs for a while now into a Guide article. Because the toolbar "embed video" function only lets you use a URL, not a full embed code div, I just took the embed code from the Vimeo's site and pasted it into the page source manually. The video embeds and plays perfectly. I gave the article two labels to make sure it would be easy to find, and I set the permissions to be viewable by signed-in users and published it, but even logged in as an admin user, I cannot find the article via search. 
    However, this article seems to be completely unsearchable in our help center, even though it is listed among the articles in its Section of our HC. The article is also not findable via the web widget in our product (which is currently using an admin/agent user to run its searches.) 
    I have enabled Unsafe HTML, and added the video.js code to our theme's Document Head section, per the instructions in this article. Please help. 

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Melissa,

    That definitely sounds like odd behavior here. I'm going to create a ticket on your behalf so I can troubleshoot further on my end. I'll most likely need to assume into your account so if you can use the following instructions to enable this feature that would be super helpful: Granting Zendesk temporary access to your account

    You'll receive an email shortly stating your ticket has been created so feel free to reply back to that with the article labels you're using as well as a direct link to the article that should display after completing your search.

    Thanks!

    0
  • Melissa Lanning
    Comment actions Permalink

    Hi Brett! I actually already have a ticket open with your Support team for this issue, ticket # 4500585.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Thanks for the heads up Melissa!

    I'll go ahead and merge my ticket in with your existing ticket to make things less confusing :)

    Looks like it's been escalated to our Tier 2 support team so they'll reach out and assist further.

    0

Post is closed for comments.

Powered by Zendesk