Forums/Community/Support tips & notes

How to embed videos in your articles

Susan
posted this on March 15, 2012 17:14

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 on or after 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! 

 

Comments

User photo
Fernando Garrido Vaz
eutopio

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

July 12, 2012 18:44
User photo
Graham Anderson
projectlambda

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

 

 

 

November 05, 2012 04:55
User photo
Justin Seymour
Zendesk

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? 

November 05, 2012 06:47
User photo
Graham Anderson
projectlambda

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

 

November 05, 2012 10:55
User photo
Justin Seymour
Zendesk

Hey Graham: 

I've created a ticket for this. Thanks! 

November 06, 2012 04:30
User photo
Graham Anderson
projectlambda

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.

November 06, 2012 05:42
User photo
Justin Seymour
Zendesk

Awesome, thanks for the update! 

November 06, 2012 06:08
User photo
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!

January 31, 2013 07:37
User photo
Justin Seymour
Zendesk

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

February 10, 2013 05:12
User photo
Jonathan Poon
teamenergy

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?

April 17, 2013 09:12
User photo
Aaron Madison
imtapps

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. 

May 03, 2013 05:21
User photo
Jonathan Poon
teamenergy

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

May 10, 2013 03:20
User photo
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!

June 19, 2013 15:38
User photo
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.

June 19, 2013 15:45
User photo
Adrian Taropa

My youtube code gets stripped altogether when saving...

June 20, 2013 19:26
User photo
Kerry Melchior
vagaro

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.

June 25, 2013 11:02
User photo
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!

June 25, 2013 14:08
User photo
Kerry Melchior
vagaro

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

June 25, 2013 15:11
User photo
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.

June 25, 2013 15:24
User photo
Adam Sentz

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

June 25, 2013 15:31
User photo
Arthur Mori
Zendesk

+1 on what Adam Sentz suggested

August 03, 2013 18:34
User photo
Nitesh Singh
auctionplugin

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

August 05, 2013 00:19
User photo
Jennifer Rowe
Zendesk

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

Hope that helps! 

August 05, 2013 13:16
User photo
Tonya Franklin
TrueReligionBrandJeans

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

August 07, 2013 13:27
User photo
Laura D.
Zendesk

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!

August 08, 2013 12:31
User photo
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! 

August 12, 2013 22:56
User photo
Dr. J
Zendesk

@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.
August 15, 2013 14:12
User photo
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? :/

October 18, 2013 04:32
User photo
Anthony Roman
Zendesk

@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

October 29, 2013 23:47
User photo
Kathrin Armbrust

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

October 30, 2013 04:21
User photo
Arthur Mori
Zendesk

Hi Kathrin,

Please use these code to embed (see below):

Screen_Shot_2013-11-04_at_2.58.39_PM.png 

Basically you would just add ?version=3&amp;fs=1&amp;hl=ru&amp;cc_load_policy=1&amp;rel=0&amp;hd=1 at the end of your youtube link

 

I was able to do this on my webportal:

Screen_Shot_2013-11-04_at_2.52.24_PM.png

 

 

November 03, 2013 22:47
User photo
David
bombbomb

We're having an issue with this where we can see videos and images from the standpoint of our users, but if we're logged in as admins no video or image appears.

Is there a way we can get this working properly?

November 08, 2013 14:47
User photo
Avi Warner
Zendesk

@David, that's odd. I can make them appear if I request Chrome load unsafe scripts. Not sure why those aren't loading by default though. I'll create a ticket for you, keep an eye out!

November 10, 2013 16:16
User photo
Marcel Crudele
soket

Videos were working in forums, but aren't anymore.

I've gone to Channels -> Web Portal and tried all levels of HTML and Javascript support with no luck.

Here are some of the pages that seem to have the iFrame from youtube stripped out:

https://soket.zendesk.com/entries/22974697-Setup-a-new-Voice

https://soket.zendesk.com/entries/25801836-Adding-an-admin-to-your-...

 

Any thoughts?

November 25, 2013 09:36
User photo
Anthony Roman
Zendesk

@Marcel - The videos are being blocked by your browser because they are in HTTP while your Zendesk is using HTTPS. Visit this link for more information: https://support.zendesk.com/entries/27879356. To fix this, either deactivate regular SSL or host videos in HTTPS.

November 25, 2013 16:52
User photo
jselanikio
datadyne

Like Cory, I cannot embed a Vimeo video. I get a yellow box and no preview when I try to embed the iframe using the video insert or using html insert feature.  I have enabled unsafe html.  Any other suggestions?  I'm running Safari and Chrome on a Mac.

December 18, 2013 10:17
User photo
Arthur Mori
Zendesk

@jselanikio - i have created a ticket on your behalf as i would like to see your embed code to be able to provide a workable solution for your request here. please reply to the ticket, thanks

December 21, 2013 01:00
User photo
Chris H.

Arthur, I am having a very similar problem to jselanikio and Cory. This is the embed code I'm using:

<iframe width="640" height="360" src="//www.youtube.com/embed/lyjOBIOZr1I" frameborder="0" allowfullscreen></iframe>

I'm trying to embed it into this article:

http://support.datarg.net/entries/22173592-Custom-Queries

I insert it directly into the HTML source at the top of the page (the empty set of <p> tags in the source code), but when I do so, the preview only shows the yellow box. After I update the page, the video does not appear.

April 09, 2014 06:25
User photo
Chris H.

Actually, ignore my previous comment. We were able to find the solution on our end.

April 09, 2014 06:51
User photo
Laura D.
Zendesk

Glad to hear you sorted it out Chris!

April 09, 2014 15:48