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>

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>

YouTube video player

<div class="video-player">
	<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="Uh9643c2P6k"></div>
</div>

Vimeo video player

<div class="video-player">
	<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="423458966"></div>
</div>