How to Integrate Plyr.io's Video Player with Custom Controls

The tutorial for this project (to re-create it yourself) can be found here.

But! If you're just wanting to see how a replacement to HTML5 Video and YouTube/Vimeo embeds WITH CUSTOM CONTROLS, clone away and mess around with this project here.

Plyr.io Integration for Video (Custom Controls) This is the simplest method of simply just using plyr.io as a custom video player with Plyr's custom controls enabled.

Plyr.io Video Integration WITH HTML5'S VIDEO ELEMENT (Custom Controls)

You can get away from HTML5's standard video element (<video>) by using Plyr as your media player.

Plyr.io Video Integration WITH A YOUTUBE VIDEO (Custom Controls)

Plyr.io can also be used for YouTube videos.

IMPORTANT: You must define the size of either the HTML Embed or the PARENT of the HTML Embed in order to get the player to appear.

Also important (but less so, which is why this is small + grey): We are electing to not use Progressive Enhancement as detailed in the Plyr.io Docs. You're free to do that, but be sure to note the class change required, which will also need to be reflected in your JS Snippet.

Plyr.io Video Integration WITH A VIMEO VIDEO (Custom Controls)

...and in lieu of Vimeo embeds!

IMPORTANT: You must define the size of either the HTML Embed or the PARENT of the HTML Embed in order to get the player to appear.
Show me Default Controls