A simple, accessible and customizable HTML5, YouTube and Vimeo media player - plyr.io 
We wanted a lightweight, accessible and customizable media player that supports modern browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
# Features - Accessible - Lightweight - under 10KB minified and gzipped - Customisable - Semantic - Responsive - works with any screen size - HTML5 Video & HTML Audio - YouTube and Vimeo video playback - Streaming HTML5 Video - API - toggle playback, volume, seeking, and more - Events standardized across formats - Fullscreen - Supports keyboard shortcuts - No dependencies - SASS and LESS - Works with Bootstrap
# HTML5 Video
<video poster="poster.jpg" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <!-- Captions are optional --> <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default> </video>
# HTML5 Audio
<audio controls> <source src="/path/to/audio.mp3" type="audio/mp3"> <source src="/path/to/audio.ogg" type="audio/ogg"> </audio>
For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty <div>):
# YouTube embed Note: data-video-id value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
<div data-type="youtube" data-video-id="bTqVqk7FSmY"> </div>
# Vimeo embed
<div data-type="vimeo" data-video-id="143418951"></div>
Note: data-video-id value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.