Videos

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

All of our themes feature an integrated Plyr video player which offers an enhanced YouTube, Vimeo or HTML 5 video experience. The player itself can be enabled using theme settings and inherits the overall style of your theme.

YouTube and Vimeo

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

We provide the source files necessary to customize every aspect of the player, from the colors to the look-and-feel of each element.

Installation

The custom video player can be added to your theme by enabling the Custom video player theme setting in the Article page elements setting group.

The styles for the player, which you can edit directly, can be found within the extension-video.(min.)css file in the theme’s Assets folder. Alternatively, you can use the Sass source files provided in the /scss/plugins/plyr/ folder by importing them in the /scss/theme/_index.scss partial.

Creating videos

Once the extension is enabled in theme settings you can start displaying your videos in the custom player using one of the methods described below.

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 (youtube or vimeo) is being used.
  5. Use the data-plyr-embed-id attribute to specify the video ID.

For example, a 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 video player can be initialized using JavaScript by passing a selector. For example, if .plyr is used on your video elements:

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    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.

Our themes are configured to automatically convert elements with the .plyr class into video players if the Custom video player theme setting is enabled.

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

Options

For a full description of the options available, refer to the Plyr documentation

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Carousels Free

Carousels

Present content in well-defined and easy to follow steps.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.