Video player
A simple, accessible and customisable media player for Video, Audio, YouTube and Vimeo
HTML5 video player
<div class="video-player">
<video controls crossorigin="anonymous" playsinline poster="assets/images/videos/poster.jpg">
<source src="assets/images/videos/360p.mp4" type="video/mp4" size="360">
<source src="assets/images/videos/720p.mp4" type="video/mp4" size="720">
<source src="assets/images/videos/1080p.mp4" type="video/mp4" size="1080">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en" src="assets/images/videos/en.vtt" default>
<track kind="captions" label="French" srclang="fr" src="assets/images/videos/fr.vtt">
</video>
</div>
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" type="text/css" href="assets/vendor/plyr/plyr.css" />
Copy-paste the following <script> near the end of your pages under Vendors to enable it.
<script src="assets/vendor/plyr/plyr.js"></script>
HTML5 audio
<div class="col-12">
<div class="audio-player bg-light p-3">
<audio id="player" controls>
<source src="assets/images/videos/audio.mp3" type="audio/mp3" />
</audio>
</div>
</div>
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" type="text/css" href="assets/vendor/plyr/plyr.css" />
Copy-paste the following <script> near the end of your pages under Vendors to enable it.
<script src="assets/vendor/plyr/plyr.js"></script>
YouTube video player
<div class="video-player">
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="Uh9643c2P6k"></div>
</div>
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" type="text/css" href="assets/vendor/plyr/plyr.css" />
Copy-paste the following <script> near the end of your pages under Vendors to enable it.
<script src="assets/vendor/plyr/plyr.js"></script>
Vimeo video player
<div class="video-player">
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="777631140" poster="assets/images/bg/06.jpg"></div>
</div>
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" type="text/css" href="assets/vendor/plyr/plyr.css" />
Copy-paste the following <script> near the end of your pages under Vendors to enable it.
<script src="assets/vendor/plyr/plyr.js"></script>