# 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>