How to embed videos in your articles

Note: Before you can embed videos in your articles, you must enable unsafe HTML in Help Center or enable unsafe HTML in Web portal.

When getting started building your forums, you'll probably want to add some videos to your articles. You can add videos that you host yourself or videos that are hosted on a social media sharing site such as YouTube.  

Help Center

If you started using Zendesk on or after August 21, 2013, you have the Help Center. You can find detailed instructions on how to add videos to your Help Center in the Contributor Guide to the Help Center.

Web portal

If you started using Zendesk before August 21, 2013,  you have the Web portal. With the Web portal, you have multiple options when it comes to embedding videos into your articles. To view these options, create a new or select an existing article in your forums. When you select to add an article, you'll need to give it a title and then add text. To then add a video, you can either directly embed a video using the insert/edit embedded media option or add code that references the video by clicking into the HTML view of the article. 

embed_video1b.png

Let's look at how you can embed a video using the insert/edit embedded media option (the film icon in the bottom right corner in the screenshot above) first. Click it open and you'll see that there are three tabs: General, Advanced, and Source. Under the General settings, you have the following 7 video types to choose from: HTML5 Video, Flash, QuickTime, Shockwave, Windows Media, Real Media, and iframe. You'll need to decide which to select, based on the format of the video you want to embed in the article. HTML, Flash and iframe are probably the most common formats used today.  

The newest version of HTML, HTML5, adds many new features such as allowing sites to directly embed media with the simple HTML tags "<video>" and "<audio>" with no plugins required. It's also a good alternative to those platforms that don't support Flash. An Iframe is an HTML document embedded inside another HTML document on a website. The Iframe HTML element is often used to insert content from another source, such as a video, into a web page.

Screen_Shot_2012-03-15_at_12.18.05_PM.png

You can also embed a video directly into the HTML source of the article. The HTML icon is in topic editing toolbar. Click the icon and you'll see the code editor. Paste in the code that references the video and then click Update and then save the article. If you do not immediately see your video, refresh your web browser. 

As an example, let's embed one of our recent YouTube videos into this tip. Go to the video on YouTube. Below the video you'll see the Share button. Click it and then the Embed button and you'll see this:

support_say.png

Set the size if you like and then select and copy the HTML code. This is an example of video embedded using Iframe. Paste the code into the topic using the HTML editor.  

4.png

Save the article and the video will be embedded just like this:

That's it. As always, if you need any support please reach out to us at support@zendesk.com. We are happy to help you make your forums as educational or entertaining as you would like! 

Have more questions? Submit a request

Comments

  • Avatar
    Fernando Garrido Vaz

    What are the supported file formats for HTML5 videos? Is there a Flash fallback for unsupported browsers?

  • Avatar
    Graham Anderson

    Hello Zendesk - it would apear your sanitizing HTML is breaking HTML5 video fallback in Firefox. In a vanilla HTML page, if I have [ square brackets denote < > ]

    [video controls="controls"]

       [source src="http://www.projectlambda.com/media/reboot-ipad/iOS\_5x\_reboot.m4v" /]

       [source src="http://www.projectlambda.com/media/reboot-ipad/iOS\_5x\_reboot.webm" /]

    Your browser does not support HTML5 video [/video]

    Then the page correctly displays video for IE, Safari, Firefox and Chrome.

    However, editing the HTML directly breaks it, and trying to use your HTML5 Video insert tool takes my entries and turns it into:

    [video control="controls" src="http://www.projectlambda.com/media/reboot-ipad/iOS\_5x\_reboot.m4v" /]

    [source src="http://www.projectlambda.com/media/reboot-ipad/iOS\_5x\_reboot.webm" /]

    Your browser does not support HTML5 video [/video]

    Here is an example page: https://projectlambda.zendesk.com/entries/22325646-rebooting-an-ipad

     

     

     

  • Avatar
    Justin

    Hey Graham: 

    I see both of your videos without error. They play as expected to the end. Did you use the insert tool for those videos? 

  • Avatar
    Graham Anderson

    The videos play fine on Safari and Chrome, but not in Firefox:

     

  • Avatar
    Justin

    Hey Graham: 

    I've created a ticket for this. Thanks! 

  • Avatar
    Graham Anderson

    Here is some sample working HTML. Note that it only works nicely on Safari, FF and Chrome if the source files are each defined in < source src="http://url... " > format, rather than picking one to be included in the < video > tag itself and listing alternates.

  • Avatar
    Justin

    Awesome, thanks for the update! 

  • Avatar
    Maria Frantz

    My videos seem to play immediately when the page is loaded, is there a way to have where the user has to click "play?"  Thanks!

  • Avatar
    Justin

    When uploading the video, just deselect the auto-play option located under the advanced tab. 

  • Avatar
    Jonathan Poon

    If I am embedding an Amazon s3 URL, the Flash player does not read it.

    Any ideas on what I need to configure on Amazon s3 to make it work on the Zendesk forum?

  • Avatar
    Aaron Madison

    I think it's important to note that you must have the option enabled in "Channels / Web Portal" / HTML and JavaScript support in forum topics  enabled for your user. 

  • Avatar
    Jonathan Poon

    Hi Jeremiah,

    Sorry, I completely forgot to reply this.

    Yes we managed to solve the problem now :)

    Many Thanks for your help and check up.

    Jon

  • Avatar
    Adam Sentz

    iframes added to the HTML content of forums are being stripped out. This stinks because we have a ton of tutorial videos embedded and whenever we edit those forums the videos are stripped. 

    Please fix!

  • Avatar
    Adam Sentz

    Should have read Aaron's comment sooner. Channels / Web Portal / HTML and JavaScript support in forum topics was set to disabled. Presumably this setting was added at some point and set this way as a default since previously we had no problems doing the embeds.

  • Avatar
    Adrian Taropa

    My youtube code gets stripped altogether when saving...

  • Avatar
    Kerry Melchior

    What I found is in the YouTube Share options, click on "Use Old Embed Code" and if you could and paste that into the "Source" tab in the ZenDesk video icon, it will play the video correctly at the correct size you setup in YouTube. The iframe code the YouTube now uses by default gets stripped by ZenDesk as mentioned above.

  • Avatar
    Adam Sentz

    @Adrian & Kerry Go to Channels > Web Portal. Looks for the setting "HTML and JavaScript support in forum topics". Set as needed.

    Worked for me. Good luck!

  • Avatar
    Kerry Melchior

    @Adam - That HTML & JavaScript was already been set correctly. ZenDesk did a recent change which negates all of the iFrame code that YouTube creates. Trust me, I've been adding YouTube videos to ZenDesk for 2 years, we have hundreds, I'm very experienced in how this should work. It a recent change that is causing problems with any updates to old forums or when you create new forums that include YouTube videos.

  • Avatar
    Adam Sentz

    @Kerry - I just did a test and YouTube's embed iframe worked fine. I was also able to edit and update without the embed getting stripped. (see attached screen)

    We're in pretty much the same situation (hundreds of tutorial videos over many, many articles). Recently when we saved an article our Vimeo embeds got stripped. Adjusting that setting fixed it.

    I believe that previously that setting didn't exist and any Admin could put in pretty much whatever HTML they wanted. Then when the setting was added the default was set to strip iframes, etc. regardless of who did it.

    Just trying to help.

  • Avatar
    Adam Sentz

    @Kerry - Try pasting the YouTube embed code into the HTML editor instead of using the Insert/edit video button.

  • Avatar
    Arthur Mori

    +1 on what Adam Sentz suggested

  • Avatar
    Nitesh Singh

    I'm not able to embed Screenr videos. Is it not possible to do that?

  • Avatar
    Jennifer Rowe

    Hi Nitesh,

    If you have a Plus or Enterprise account you can add a screencast to a forum topic.

    https://support.zendesk.com/entries/21590723-Adding-a-screencast-to-a-ticket-or-forum-topic

    Hope that helps! 

  • Avatar
    Tonya Franklin

    I don't see the General - Type - dropdown values...?

  • Avatar
    Laura D.

    Hi Tonya, 

    Sorry, we have a little bit of a bug with how those names are showing but you should still be able to select the right type of file and upload a video (I did a test a few minutes ago and it worked). We're working on a fix - hope to have one soon!

  • Avatar
    Cory York

    Guys, why is this not working. I have tried every which way possible to embed a Vimeo Video into our support pages. nothing works. I get a yellow box and no preview! when I save nothing displays! 

  • Avatar
    Dr. J

    @cory - sorry to hear that you’re having trouble!

    1. is it a public video on Vimeo, or one that is secured and requires a login? If it’s a private video, that would likely cause trouble unless the user logged directly into Vimeo already in the past.
    2. Check your settings under Admin -> Channels -> Web Portal and make sure that you’ve enabled Administrators to upload HTML and JavaScript in forums.
  • Avatar
    Kathrin Armbrust

    Hi everyone,

    thanks Aaron for the tip (30th May), that was quite helpful. 

    I'm trying to embed a youtube video with forced subtitles.

    The normal URL is: http://www.youtube.com/watch?v=75J72dlY9Ec

    The URL with forced English subtitles is: http://www.youtube.com/watch?v=75J72dlY9Ec&cc=1&hl=en

    If I use the normal URL I don't get any subtitles, or rather: I don't get any, because that's my preferred setting on Youtube. If I use the second link, English subtitles are activated automatically. So "the force attributes" in the URLs seem to be correct.

    However, when trying to embed the second link in one of our guide forums, Zendesk seems to strip the URL back to the basic URL. The video is embedded properly, but won't force subtitles upon the viewer. When I get back to editing, I can see clearly that "&cc=1&hl=en" is gone from my URL. I read in Google's documentation that when using iframe I might add the attributes to the URL directly(?) Though, when I get back to editing and add the attributes manually, I kind of destroy the embedded player completely ;) (see screenshot). 

    Any suggestions? :/

  • Avatar
    Anthony Roman

    @Kathrin - I found a guide online which I believe will help you despite of it being 2 years old - http://www.makeuseof.com/tag/force-subtitles-embedded-youtube-video/. And here is one from Google - https://support.google.com/youtube/answer/171780?hl=en&rd=1. 

  • Avatar
    Kathrin Armbrust

    Still not working, sadly. Again the attributes drop out as soon as I hit save ;( But thanks for your help, anyways!

Please sign in to leave a comment.