How to Integrate Plyr.io's Video Player with Default 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, clone away and mess around with this project here.

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

Plyr.io Video Integration WITH HTML5'S VIDEO ELEMENT (Default 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 (Default 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 (Default 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 Custom Controls