Sections

Videos

Display YouTube, Vimeo and HTML5 videos using a beautiful custom player.

In this article

All of our themes fully support the Plyr plugin, which offers an enhanced YouTube, Vimeo or HTML 5 video experience. You can also use native embeds without the use of a plugin. To start using the custom video player in your Help Center, enable it within the Article page elements setting section in your theme’s settings.

Examples

  • <div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
  • <div class="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>

Usage

Use the .ratio utility on your video element to control the aspect ratio of the video.

When creating or updating an article or page template:

  1. Click the Source Code (Source code icon) button in the editor toolbar to view the source code of the page.
  2. Create an empty <div> element where you’d like the video to appear.
  3. Add a class name of plyr to the element.
  4. Use the data-plyr-provider attribute to identify which video provided is being used.
  5. Use the data-plyr-embed-id attribute to specify the video ID.

For example, for YouTube would look like this:

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

For self-hosted videos, the <video> element should be used. For example:

<video class="plyr" poster="/path/to/poster.jpg" playsinline controls>
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

The Plyr plugin can be initialized using JavaScript by passing a selector. For example, if .plyr is used on your videos:

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

You can then specify option using data attributes as described on the previous tab or pass options as a second argument to the constructor.