Video Players

Provides a high-performance wrapper to video sources from Youtube, Video and self-serve MP4.

About the Plugin

WebsiteGitHubnpm

Video players are handled by the Plyr library. Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page

    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
<script type="text/javascript" src="assets/js/plyr.polyfilled.min.js"></script>

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
<script type="text/javascript" src="https://unpkg.com/plyr@~3.5.2/dist/plyr.polyfilled.min.js"></script>
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './plyr';
  3. Load the required CSS in components.scss
    • Declare the following import statement in scss/custom/components.scss:
      @import "components/optional/plyr";

Basic Usage

Start by adding class plyr to an empty <div>.

Add data-plyr-provider and data-plyr-embed-id attributes.

data-plyr-embed-id can be the video ID or URL for the media.

Youtube Example
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
Vimeo Example
<div class="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
HTML 5 Video 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>
HTML5 Audio
<audio class="plyr" controls>
    <source src="/path/to/audio.mp3" type="audio/mp3" />
    <source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>

Options

Options can be provided to the Plyr element by adding options in JSON format on the data-plyr-config attribute.

Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.

<video src="/path/to/video.mp4" id="player" controls data-plyr-config='{ "title": "Example Title" }'></video>

A full list of options is available at the Plyr documentation