# Video Players

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

###

About the Plugin

Website GitHub npm

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