Custom HTML In WordPress & Plyr

I had an adventure hacking together some shit in WordPress for a project I’m not going to even talk about much.

Before you start getting really concerned; it’s an audio/podcast stuff

Prologue…..

So a couple of years ago…well, about 20 of them; I used to do do internet radio. I had legitimate aspirations of being a radio DJ and even got told by numerous people that for someone with no training, I had a talent for it. I just mostly liked playing music. But I also played some novelty and parody stuff; except I’d play it “seriously”. It was usually in heavy rotation and wasn’t treated as an occasional thing. So out of this thing a Christmas CD grew. It started when I was prepping for a broadcast of christmas novelty; a friend stole one of the CDs I burned to learn the tracks (lead ins and stuff) out of my car and shared it with his friends. He wanted another one the next year…so I threw one together. I sent ones to a few friends; they wanted more the next year.

Sometime around 2008 (apparently) I was toying around with the idea of converting to pre-produced podcast style stuff; because live shows were getting to be a pain to do; but I was also focusing more on my annual christmas card than I was the live shows. So it wasn’t until 2011 after I “forgot” to send “a card” in 2010 that I picked up the pre-produced idea and went with “digital distribution”. I’d make it, I’d send my friends the links; sometimes they sent them to others. It probably has a little mystique; here’s a page with virtually no contact information or way of knowing who it is; it’s just…this mix offered in every possible audio format. The people that don’t know me might not hear anything else until their friend tells them the new one is up.

For a number of years I used JWPlayer to embed a player on the static HTML pages I’d generate. I literally used the same version and page for about 5 years before I decided to update. But it’s no longer free, so I came across Plyr. Plyr is an HTML5 media player…or as it seems to behave, an overlay for the default HTML5 controls in your browser. It was a PITA to customize the first go around, so I…again…used the same code over and over and over for number of years. But I had a reason to change the colors for something else; it was a PITA then and I forgot what I did. I found it was much less of a PITA with newer versions.

Returning from the tangent….

So I bought a domain for this project and decided why not do it with WordPress; even though it’s almost totally incompatible with how I did it. I was fine with doing a total design change vs. what I’d been using for over 10 years. In fact I decided to use the BlankSlate theme and make it look horrible on purpose. But there was still a new problem, two actually; I still wanted to embed the stream in a post with all of the compatibility I had with my static stuff…and WordPress plugins for the job sucked. In fact, other than a select few; I try to avoid most of the WordPress plugins.

So….can I make the plain vanilla Plyr that I’d use on static HTML work the same way within WordPress? After a bit of hacking and tweaking, yes. Yes I can!

It’s More Than Just The Custom HTML Block

On one hand it should make since this would work since you have a Custom HTML block available; so placing arbitrary code in your post is not a problem. The problem is you’re literally only adding standard HTML5 commands for audio:

<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>

Just this custom block alone (with the actual filename locations of course) just adds all the audio sources for player controls; it doesn’t actually call plyr directly. Those are done by calling a css file in <head> and adding a <script> before the end of the body. So I’m going to need to go in and modify the theme itself. The good news is that loading Plyr without calling any controls is not a problem; provided I avoid more than one on a page. I just had to do a little hacking and find the right way of doing it.

header.php

I don’t really know much about using stylesheets; so all I try to do is keep the call to plyr.css within the <head> of the rendered page. That’s not actually too difficult by just adding it in to the header.php file:

<?php wp_head(); ?>
<link rel="stylesheet" href="plyr.css" />
</head>

footer.php

The Plyr docs basically say the Javascript stuff can exist before </body>, which is literally where I stuck them on my static pages. So…just find a spot inside footer.php before the </body> to insert it:

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

So, with both of those pieces of code added we’re no longer using the browser’s default HTML5 controls, Plyr has popped up. It’s exactly what I had before; full audio format support with some custom Plyr control colors. There’s just one problem….

It’s Too Damn Wide!

If Plyr has functions to specify it’s width, I’m far too lazy to find them; but by default, it wants to use 100% of the available space for it’s controls. With BlankSpace being all left-justified, I had a 1920px wide control while everything else was less than 500px wide.

To fix this, I just had to pull in to my little bag of tricks; I made a 500px wide table with a 100% width cell, and put my content in to that. This wrangles the Plyr controls to be all left justified and as ugly as the rest of the theme.

Site comments disabled. Please use Twitter.