Customizing Media Players with Plyr.io

tl;dr:

If you can manage your way around Javascript and don't give a damn about how this project is built and just want to get started, I don't blame you — you just want to build. You can clone the entire project onto your Webflow Dashboard by clicking here.

Introduction

Look: there are times where the standard HTML5 Video and Audio elements just don't cut it, plain-and-simple. The same look across every website ever can get old, and sometimes, you want more control than you can get with this media player default. Furthermore, third-party media player embeds leave little room for customization. SoundCloud has the same embedded player, and you can really only get a different audio player from them if you upgrade your account to the highest tier. It's a similar story with Vimeo's player, and the YouTube player is quite far from customizable in general.

Want to change it? Plyr.io is your new best friend — a big shout-out to Sam Potts for building this! Plyr is a simple, accessible, and customizable media player that replaces HTML5 Video/Audio elements, YouTube embeds, and Vimeo Embeds.

Some Notes

• While this tutorial is built on static pages within Webflow, it can be used with the CMS. (The only difference is that your media source needs to come from the CMS, whether that be a link to an MP4 or audio file or the ID of a YouTube/Vimeo video.)
• The GitHub documentation can be found here.
• IMPORTANT: This tutorial assumes that your page is somewhat set-up and designed. Not a requirement by any means, but we're not going to be walking through designing your page. Clone my project to get started quick.

Get Started (Default Controls)

Regardless of whether you want to integrate Plyr's video or audio player, you'll need to reference some required files found in the Plyr.io docs.

• The Plyr.io Library itself (Javascript)
• The Plyr.io Stylesheet (CSS)

The former is the Javascript files that actually do most of the heavy lifting that we don't see, and the latter is the stylesheet that designs the Plyr.io player for us. We just need to reference these via the CDN resource provided. (Meaning the files are hosted elsewhere.)

In the Custom Code settings: within the {% code-line %}Inside < head > tag{% code-line-end%}, add the following snippet:

{% code-block language="js" %}
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css" />
{% code-block-end %}

In the same panel, one field below in the {% code-line %}Before < body > tag{% code-line-end %} , add this snippet:

{% code-block language="js" %}
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         const player = Plyr.setup('.js-player');
     });
 </script>
{% code-block-end %}

Note: you'll see here that we defined the class of the player as {% code-line %}.js-player{% code-line-end %} . While this is the class name I used, you can really use whatever you'd like. Just be sure to replace the class throughout the code!

Integrating Plyr for HTML5 Video

HTML5 Video elements use the {% code-line %}< video >{% code-line-end %} tag to embed a video on the page. We're going to still be using the {% code-line %}< video >{% code-line-end %} tag to pull in our video, but we're going to add the class of {% code-line %}.js-player{% code-line-end %} as mentioned above. Drag an HTML Embed onto the page, and inside of it, paste the following:

{% code-block language="html" %}
<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="js-player"><source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"/></video>
{% code-block-end %}

Note: the poster element is not required, but recommended. It's the thumbnail image shown prior to the video being played. Further, you would replace the {% code-line %}src{% code-line-end %} with a link/path to your video, and same with the {% code-line %}poster{% code-line-end %} URL.

And... that's actually it! Hit Publish and then watch as the standard HTML5 Video element is replaced with Plyr's media player.

Integrating Plyr for YouTube/Vimeo Videos

According to the docs, Plyr has a few methods of doing this - including a method that uses Progressive Enhancement, but I should note that we are not using the Progressive Enhancement method.

You're more than welcome to use it though, as you just have to make a simple {% code-line %}class{% code-line-end %} change in your embedded code snippet. (Change it from {% code-line %}.js-player{% code-line-end %} to {% code-line %}.plyr__video-embed{% code-line-end %} and Progressive Enhancement will kick in. Be sure to change this in the Javascript snippet above!)

Drag an HTML Embed onto the page, and inside of your HTML embed, add the following snippet:

{% code-block language="js" %}
<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="v1M4ydNlgP0"></div>
{% code-block-end %}

When you look at any YouTube video, the URL generally looks like this:

{% code-line %}https://www.youtube.com/watch?v=v1M4ydNlgP0{% code-line-end %}

The {% code-line %}v1M4ydNlgP0{% code-line-end %} part of the URL is the ID that YouTube has assigned to that video. Grab the ID of the video you want to embed, and replace the {% code-line %}data-plyr-embed-id{% code-line-end %} with that same ID.

—

What if I want to use Vimeo? Simply replace {% code-line %}data-plyr-provider="youtube"{% code-line-end %} with {% code-line %}data-plyr-provider="vimeo"{% code-line-end %} , and replace the {% code-line %}data-plyr-embed-id="v1M4ydNlgP0"{% code-line-end %} with the the ID of the Vimeo video. (They use a similar URL structure.)

—

IMPORTANT: In order for this to work for YouTube videos, you must first define the size of either the HTML Embed itself OR an ancestor element. What do I mean by this? When you drop in your HTML Embed element in Webflow, you'll need to either give that element a defined width/height (px, vw, vh - whatever floats your boat) OR give any of the ancestors (parent, parent of the parent, etc.) a defined size. This is because the code below needs some size parameters when the page loads to determine the video size. (Please view the read-only to see how I did this.)

Once you've:

• Added in the CSS Stylesheet Link
• Added in the JS Snippet
• Added in the HTML Embed with the snippet inside
• Defined the size of the HTML Embed OR an ancestor

You're done! Hit Publish and you'll be set.

Integrating Plyr for Audio (HTML5, SoundCloud, etc.)

HTML5 Audio elements use the {% code-line %}< audio >{% code-line-end %} tag to embed a video on the page. We can use the {% code-line %}< audio >{% code-line-end %} tag for SoundCloud embeds and other third-party audio sources as well. Just like we did with the integrations above, we're going to add the class of {% code-line %}.js-player{% code-line-end %} as mentioned above. Drag an HTML Embed onto the page, and inside of it, paste the following:

{% code-block language="html" %}
<audio class="js-player">
<source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"/>
</audio>
{% code-block-end %}

Done! Hit Publish and then watch as the standard HTML5 Audio element is replaced with Plyr's media player.

"Okay... but I want custom controls."

Cool! We can do that too. Plyr is customizable enough to allow you to control a variety of settings within the player itself. Here are the controls we can either hide or show to the user. (Some are browser- and device-specific, like Airplay.)

{% code-block language="js" %}
controls: [  
'play-large', // The large play button in the center  
'restart', // Restart playback    
'rewind', // Rewind by the seek time (default 10 seconds)    
'play', // Play/pause playback  
'fast-forward', // Fast forward by the seek time (default 10 seconds)    
'progress', // The progress bar and scrubber for playback and buffering    
'current-time', // The current time of playback    
'duration', // The full duration of the media    
'mute', // Toggle mute    
'volume', // Volume control    
'captions', // Toggle captions    
'settings', // Settings menu    
'pip', // Picture-in-picture (currently Safari only)    
'airplay', // Airplay (currently Safari only)    
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options    
'fullscreen', // Toggle fullscreen
];
{% code-block-end %}

"OK, so what do I do differently?"

You'll still follow the steps exactly as written above for your desired player, with just one modification — a modified Javascript snippet!

In lieu of the first Javascript snippet at the very top of this document, paste the following in to the {% code-line %}Before < body > tag{% code-line-end %} :

{% code-block language="js" %}
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script>
          document.addEventListener('DOMContentLoaded', () => {
         // Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control
         // to the settings, ALL default controls are removed and you have to add them back in by defining those below.
          // For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default.
         // Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed,
         // meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again.
             const controls = [
             'play-large', // The large play button in the center
             'restart', // Restart playback
             'rewind', // Rewind by the seek time (default 10 seconds)
             'play', // Play/pause playback
             'fast-forward', // Fast forward by the seek time (default 10 seconds)
             'progress', // The progress bar and scrubber for playback and buffering
             'current-time', // The current time of playback
             'duration', // The full duration of the media
             'mute', // Toggle mute
             'volume', // Volume control
             'captions', // Toggle captions
             'settings', // Settings menu
             'pip', // Picture-in-picture (currently Safari only)
             'airplay', // Airplay (currently Safari only)
             'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
             'fullscreen' // Toggle fullscreen
         ];
         const player = Plyr.setup('.js-player', { controls });
     });
 </script>
{% code-block-end %}

IMPORTANT: Plyr.io works in such a way that as soon as you modify any of the controls at all using the custom snippet, ALL controls are gone and you need to manually specify the controls you want. This means that if you're literally just looking to add in the {% code-line %}rewind{% code-line-end %} button on top of the default controls but specify just rewind in controls, your player will literally only have the {% code-line %}rewind{% code-line-end %} button - no play button, no progress bar, volume, etc.

When you paste in that above snippet, your player should have the full array of controls that player allows for. If you're looking for a snippet that just shows you {% code-line %}play{% code-line-end %} , {% code-line %}progress{% code-line-end %} , and {% code-line %}restart{% code-line-end %} , you'll simply specify that as follows:

{% code-block language="js" %}
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script>
     document.addEventListener('DOMContentLoaded', () => {
         // Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control
         // to the settings, ALL default controls are removed and you have to add them back in by defining those below.
         // For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default.
         // Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed,
         // meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again.
         const controls = [
             'restart', // Restart playback
             'play', // Play/pause playback
             'progress' // The progress bar and scrubber for playback and buffering
         ];
         const player = Plyr.setup('.js-player', { controls });
     });
 </script>
{% code-block-end %}

It's that simple! Add-and-remove what you need, hit publish, and you're set!

"Can I use this with the CMS?"

Sure! The only difference is that you'll need to replace the {% code-line %}src{% code-line-end %} in all of these players with the path or ID to the media from your CMS item.

Hopefully this helped! If it did, I would love to hear from you. Comment below, DM me on Twitter, or send me a good ol' fashioned email at matt@visualdev.fm.

‍

‍