You can insert videos in the body of your help center knowledge base articles, either through the help center editor toolbar or by embedding code in your article. You can also use the content block editor to insert videos into content blocks, making them reusable across one or more articles in your help center. See Creating and inserting reusable information with content blocks.
All plans include the ability to insert videos in articles, However, content blocks are available in Enterprise plans only. See Reusing content with content blocks.
Inserting videos from the article editor toolbar
- Vimeo
- YouTube
- Wistia
- JWPlayer
- Brightcove
- Vidyard
- Loom
- Microsoft Stream
If you are using Web Widget (Classic) on your website or help center, your end users can stream videos in help center articles directly in the Web Widget (Classic). To display correctly in the Web Widget (Classic), videos must be publicly available and hosted on one of the supported third-party services.
To insert a video in an article using the article editor toolbar
- Copy the URL for your video.
Your video must be hosted on Vimeo, YouTube, Wistia, JWPlayer, Brightcove, Vidyard, Loom, or Microsoft Stream. If your video is on one of the supported services, you can use this procedure to insert your video. You do not need to enable the option to allow unsafe content in your help center to do so.
If your video is not hosted on a supported provider, you'll need to insert the video by embedding code).
- In help center or Guide Admin, edit an existing article or content block or create a new article or content block.
Note: You must be on an Enterprise plan to use content blocks.
- Place your cursor where you want the video to appear, then click Add video on the editor's toolbar.
- Paste the video's URL in the dialog box. A preview of the video appears.
To insert a video created using JWPlayer, use the URL format content.jwplatform.com/players/<video id>-<player id>
- Click Insert.
- When you are ready, click Save.
Inserting videos by embedding code
If your video is hosted on a non-supported service, use the article source code editor to add the video’s embed code to insert the video. Be aware that this means you must allow unsafe HTML (see Allowing unsafe HTML in pages).
Some third-party video hosting services do not count video views unless you have manually embedded the code to insert the video. Use the embed method if you need to track video views as part of your analytics.
40 Comments
Hi all
Does anyone here know how can I do the following;
I have inserted the video using Vimeo. Here's my code.
Right now, it looks like this in the article section
Hi Vemmal-N
Can you please share the url of the article where you are implementing the video part
Thanks
Hi Pulkit Pandey
This is where we are planning to implement it
https://help.lottiefiles.com/hc/en-us/articles/8705456865689-QR-Code
Hi Vemmal N
Sorry for the late replay :)
Please add a new class to your iframe called "videos" and then add the below CSS at the end of your style.css file
.videos {border-radius: 5px;
box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
}
Let me know if it solves your issue
Thanks
Pulkit
Team Diziana
Pulkit Pandey
Thank you so much! That solved most of my issues except for 1.
how can I make the text the same width as the video?
Hi Vemmal N
Please replace the below CSS with your current one
.videos {border-radius: 5px;
box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
width: 100%;
}
Let me know if it solves your issue
Thanks
Pulkit
Team Diziana
Hi,
We are trying to embed a video hosted in our own servers. However, it seems that zendesk is removing some of the attributes we add to the `video` tag. For example:
<video
src="<our url to a video hosted in our server>.mp4"
controls="yes"
controlslist="nodownload"
width="100%"
preload="auto"
></video>
The video is showing ok, but the `controlslist="nodownload"` is removed. Is there a way to add such attributes?
Thank you
Hi Javier,
You can add the missing attributes with the help of Javascript, please follow the below steps to add it
1. Add a new class called “videoattr” on your video tag which you are using to embed video .
As shown below
2. Now add the below script at the bottom of your script.js file
var i;
var videosAttr = document.querySelectorAll(“.videoattr”) ;
for(i=0; I<= videosAttr.length;i++) {
videosAttr[i].setAttribute(“controlslist”, “no download”);
}
Let me know if it solves your issue
Thanks
Pulkit
I'd recommend taking a look at this article which goes over editing your Guide theme.
Customizing your Help Center
I hope this helps!
Dear all, I just noticed that this article has been updated, now including Microsoft Stream as one of the video platforms which Zendesk supports.
There seems to be no further info around this within Zendesk.
Microsoft though has indicated their Strategy shift for Stream, from Stream (Classic) to Stream (on SharePoint). I have to assume that the support from Zendesk for Stream is based on the new Stream (on SharePoint) and not Stream (Classic)? Can this be confirmed?
Zendesk Guide articles still don't include a visual support message to support Stream, nor can a link from Stream (Mainly a MS SharePoint link) be included. Only the iFrame embedment is working, although its not clear how the permissions work from MS to ZD, as we have an online MS O365 setup, but as far as I know we don't allow to share links externally.
The Stream link in ZD Guide article works for me, but that probably only because I have access to it as an employee of our MS O265 tenant.
Is there more info about this new feature including what the possibilities are as well as how to manage it?
Many thanks!
Please sign in to leave a comment.