Adding HTML5 Plyr Into WordPress

Plyr is a rather nice HTML5 media player I’ve used on non-Wordpress pages for a couple of years. It replaced a Flash/Javascript applet that was horribly out of date and had switched to this new model where they wanted you to pay them for self-hosting. No thanks. The switch to Plyr also got me off the practically-dead/blocked Flash platform and on to something more up to date. Integrating Plyr with my pages was rather simple; though customization was funky at first. Updates have changed that…because I’m guilty of not having updated it for a couple of years.

I don’t really care for most WordPress plugins, as I’ve found them to either be security risks, lousy, or force me to adopt a certain style. There is a Plyr plugin for WordPress; but it is years out of date…going back to my distrust of plugins. But my lazy butt does like managing a site via WordPress than by hand. I know there is the ability to stick your own HTML code in to the mix; and in fact the HTML5 block in the block editor has proven to be perfect for that. But slapping Plyr on to your pages is going to require modifying the WordPress theme.

Installing Plyr To Your Server

You will need to download and copy the three main plyr files to the root of your webserver:

  • plyr.css
  • plyr.js
  • plyr.svg

Additionally, Plyr has a CDN that will allow you to pull these files from them. The GitHub repository has the information for pulling these files from their CDN, as well as all the other configuration options. I will not be going over how to configure Plyr; just how to make it work with HTML5 blocks in WordPress

Modify Your Header

Every WordPress theme has at least one file that defines the header of the HTML document, usually called header.php. Sometimes the entire header is contained in this document…sometimes it calls additional documents to form the header. But what you’re mostly looking for are the <head> tags in the document. Just before the closing </head> element, you’ll want to add this line:

<link rel="stylesheet" href="plyr.css" />

If you are using the CDN version, then update the file name with the full location, something like this:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />

Modify Your Footer

You now need to modify the theme footer file (usually footer.php) to add the Javascript stuff. In the themes I’ve worked at; there’s usually a </div> tag at the top of this file. I typically insert it after the first </div>, but you should be ok as long as it’s somewhere before the closing </body>:

<script src="plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

They also provide this file over their CDN:

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>

Add Plyr Elements

With this code added to your header and footer; you’ve basically made every page able to use Plyr. Since Plyr builds on the HTML5 player in the browser, you only need to the standard commands to embed a piece of media:

<audio id="player" controls=""><source
src="1.opus" type="audio/ogg; codecs=opus"><source
src="1.ogg" type="audio/ogg"><source
src="1.m4a" type="audio/mp4"><source
src="1.mp3" type="audio/mpeg"> Sorry,
your browser doesn't support HTML5 audio. Please download.</source> </source></source></source></audio>

If you only have one file source, then you only need one <source></source> element in your <audio> block. So why do I have four? It’s just a compatibility thing. MP3, though universal, is not my favorite audio format. Things like OGG and Opus are much better at low-bitrate, but they come with compatibility issues. By making multiple options available, the browser will play the first one it’s compatible with. If doesn’t support Opus, it will fall back to Ogg; if ogg doesn’t work, it will fall back to AAC; if that doesn’t work, then we fall back to MP3. The text is only displayed if the person’s browser doesn’t understand HTML5 audio.

Every Page Will Be Plyr Compatible

One word of caution is that by adding the CSS and the JS to the header/footer; you’ve basically made every page Plyr capable. While it would be nice to limit this to specific pages; I don’t think I can do that with WordPress easily. There’s no harm I can see in this; but you need to make sure that if your homepage shows recent posts; that the summaries DO NOT have Plyr in them. Trying to load multiple Plyrs from multiple posts on the home-page will just cause issues. You can support two different instances of Plyr; but you have to name each one and add additional calls to the JS. It’s easier to just make sure that none of your embeddd content shows up on the main page…unless you have just ONE copy on the main page.

Plyr Is Extra Wide

By default, Plyr will take up the entire width of the element you’ve put it in. In most themes, that’s probably fine; your content itself is in a <div> element and size restricted. But…if it’s not, or what you get doesn’t work; then you will need to use either a table or some CSS magic to limit the controls to the width you want.

There you have it. You now have Plyr operating as intended instead of a lousy, outdated, WordPress plugin. Just create your posts/pages, drop your <audio> element in to a Custom HTML5 block, and off you go.

This content was also written as a blog post previously.

Site comments disabled. Please use Twitter.