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:
- Click the Source Code (
) button in the editor toolbar to view the source code of the page. - Create an empty
<div>element where you’d like the video to appear. - Add a class name of
plyrto the element. - Use the
data-plyr-providerattribute to identify which video provided (youtubeorvimeo) is being used. - Use the
data-plyr-embed-idattribute 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
