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>