Media Player

A simple HTML5, YouTube and Vimeo player
Read the official plyr Documentation for a full list of instructions and other options.


In order to use plyr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/plyr/plyr.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/plyr/plyr.js" />



Plyr extends upon the standard HTML5 media element markup so that's all you need for those types. Just add your source and initialize it like mentioned below.

<video class="w-100" poster="" id="plyr-video-player" playsinline controls>
  <source src="" type="video/mp4" />
const videoPlayer = new Plyr('#plyr-video-player');


Initialization of audio player is same as video player. Refer below mentioned code to create an audio player using plyr.

<audio class="w-100" id="plyr-audio-player" controls>
  <source src="./assets/audio/Water_Lily.mp3" type="audio/mp3" />
const audioPlayer = new Plyr('#plyr-audio-player');
© 2017- Pixinvent, Hand-crafted & Made with ❤️