Adding videos

Videos are a popular and effective way to communicate ideas within your articles and it's important to make them look their best.

On this page

All of our themes support video embeds from popular online providers like YouTube, Vimeo and Wistia.

Inserting a video

The Zendesk article editor can embed videos from YouTube, Vimeo, Wistia, Loom, JWPlayer, Brightcove, Vidyard, Synthesia and Figma/Jam. YouTube Shorts aren’t supported.

To insert a video into an article:

  1. Copy the URL of your chosen video.
  2. Create a new article or edit an existing one in your help center or Knowledge admin.
  3. Place your cursor into the editor where you would like your video to appear.
  4. Click the Article components button in the editor toolbar and select Embed.
  5. Paste the video’s URL into the dialog box. A preview of the video will appear.
  6. Click Insert, then Save.

Videos from other providers can be inserted using an embed code. If you use this approach you may need to allow unsafe HTML in article content in order for them to work properly. Videos inserted using the Embed component work without changing this setting.

Controlling the aspect ratio

Our aspect ratio utilities help ensure that your message gets communicated well by making sure they occupy the right amount of space. To have your videos adopt a standard 16/9 aspect ratio add the .ratio and .ratio-16-9 classes to the video <iframe> parent element:

<p class="ratio ratio-16-9">
  <iframe src="//www.youtube-nocookie.com/embed/f2tu2G5MYH4" frameborder="0" allowfullscreen></iframe>
</p>

This will ensure that your video fits the content area perfectly and looks great on all screen sizes.

Using a different player

All of our themes feature an integrated Plyr video player which offers an enhanced YouTube, Vimeo or HTML5 video experience. The player can be enabled through theme settings.

Unlike the standard YouTube and Vimeo players you can customize the look-and-feel to align with your company brand using theme settings and the Sass styles provided with our themes.

When editing your article you can then add the following snippet where you want to see your video appear using the editor’s HTML (source code) view:

<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="f2tu2G5MYH4"></div>

Where:

  • The data-plyr-provider attribute is youtube, vimeo or html5.
  • The data-plyr-embed-id attribute is the video ID or URL.

Questions or feedback about this article? Let us know