Player for website video and audio using Plyr

In this tutorial we will learn about Plyr which helps in creating simple HTML5, YouTube and Vimeo player.

Click here to visit Plyr GitHub repository.

<!-- plyr --><!-- plyr ends here -->

Install

If you have Node and NPM installed then use the following command to install Plyr as dependency.

npm install plyr

Or, download the latest release from their repository.

Or, use the CDN.

JavaScript

<script src="https://cdn.plyr.io/2.0.15/plyr.js"></script>

CSS

<link rel="stylesheet" href="https://cdn.plyr.io/2.0.15/plyr.css">

Step 1: Include the stylesheet

Include the Plyr stylesheet in the page.

<link rel="stylesheet" href="path/to/plyr.css">

Step 2: Include the script

Include the Plyr script in the page.

<script src="path/to/plyr.js"></script>

Step 3: Create Markup

For this example we will use Plyr to show a YouTube video.

<div id='plyr-youtube' data-type="youtube" data-video-id="TbsvRyYpcOQ"></div>

Step 4: Plyr setup

Now we will call the setup() method and pass the id of the element.

plyr.setup("#plyr-youtube");

Example

In the following example we are using YouTube video.

<!-- create plyr --><!-- create plyr ends here -->

Plyr for HTML5 video

In the following example we are creating a HTML5 video tag and including the video files.

HTML

<video id="plyr-video" poster="/path/to/video-poster.png" 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/video-caption.vtt" srclang="en" default>
</video>

JavaScript

plyr.setup("#plyr-video");

Plyr for HTML5 audio

In the following example we are creating a HTML5 audio tag and including the audio files.

HTML

<audio id="plyr-audio" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3">
  <source src="/path/to/audio.ogg" type="audio/ogg">
</audio>

JavaScript

plyr.setup("#plyr-audio");

Plyr for Vimeo embed

In the following example we are creating a div to include the Vimeo video.

HTML

<div id="plyr-vimeo-example" data-type="vimeo" data-video-id="143418951"></div>

JavaScript

plyr.setup("#plyr-vimeo-example");

Example

<!-- create plyr --><!-- create plyr ends here -->