Sections

Make videos look amazing

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

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

Inserting a video

Zendesk supports inserting video from YouTube, Vimeo, Wistia, JWPlayer, Brightcove, Vidyard and Loom using their article editor.

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 within Guide Admin.
  3. Place your cursor into the editor where you would like your video to appear.
  4. Click on the Add video button in the editor toolbar.

    Add video button in article editor

  5. Paste the video’s URL into the dialog box and click on the Insert button.

    Add a video to an article

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.

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

Our themes fully support the Plyr plugin which offers an enhanced YouTube, Vimeo or HTML 5 video experience. Unlike the standard YouTube and Vimeo players you can customize the look-and-feel to align with your company brand using the Sass styles provided with our themes.

To install the plugin, add the following code to the bottom of your article_page.hbs template:

<script type="text/javascript" src="https://unpkg.com/plyr@~3.5.6/dist/plyr.polyfilled.min.js"></script>

<script type="text/javascript">
  ready(function() {
    Plyr.setup('.plyr');
  });
</script>

When editing your article you can then add the following snippet where you want to see your video appear using the Zendesk Source Code editor:

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

Refer to the Plyr documentation for detailed installation and usage instructions.

Questions or feedback about this guide? Let us know