Better than Radar Matic! Adding More WordPress Autoembeds to Your Kit

Oh WordPress, how I love the, let me count the ways… well one of the ways is the ease of embedding all kinds of media sources just with a simple URL.

I am surprised seeing so often authors on WordPress sites adding a link to a YouTube video, when it is even simpler to embed the thing right in the page (it’s not just WordPress, I am forever editing posts in the OEG Connect discourse powered site as people do not know how easy it is).

It’s built into WordPress through some magic called oEmbed that handles it via some mumbo jumbo API passing when a service provides the functionality. All WordPress sites come preset to easy embed all kinds of source content, just stuff from that little tube video site.

You know what is even more amazing? or curious? WordPress supports embedding from Giphy but does not list it, in fact it lists it as removed. Still Giphs for me… (ah now I am really distracted)

Excited Jurassic Park GIF - Find & Share on GIPHY — More amazing than living dinosaurs! https://giphy.com/gifs/shocked-jurassic-park-amazed-zz00w5nNFMnPq

With some elbow grease, you can enable support for other services not available in WordPress. I’ve done a lot of similar stuff to make the SPLOTbox theme work to embed featured media from a URL, but it’s a little different to enable autoembeds from any editing block or ye olde classic editor.

Enabling Some Audio Auto Embeds

I wanted to add some very simple ways on a WordPress site Cori uses with her high school students to post audio reflections. When you think about trying to provide upload support for all the kinds of weird audio formats you get from different devices, it gets messy.

My thought was to have students record on either Vocaroo or Sodaphonic Boombox – where you can record audio via a web interface (mobile too) that is saved as a link. The best part no accounts are needed nor is any personal identification collected. Okay, easy to record and save as a link (that also provides an embed code, but I am not wanting to ask people to deal with raw HTML). How to get in a WordPress post?

Yes a shortcode is easy to do, but people have to remember their syntax. I briefly wondered about making a custom embed block, but I just could not get very far in building that.

Then it struck me the easiest way is to add support for these services via an auto embed. Then, they just need to copy and paste that link into a post.

Conceptually it is easy as the conversion from a link like https://sodaphonic.com/audio/344uhz2j8NUJjyUkckQq to it’s embed code is really a matter of parsing that string of numbers and letters at the end of the URL to embed as:

<iframe width="100%" height="156" scrolling="no" frameborder="no" allow="autoplay" src="https://sodaphonic.com/embed/344uhz2j8NUJjyUkckQq"></iframe>

Into the wp_embed_register_handler We Go

If you are able to deduce from a URL the info needed to generate am embed code, the way in is via the WordPress function wp_register_embed_handler. It calls for setting up a regex (regular expression) to identify a source from a URL.

I have maybe a 0.10 level of expertise in regex, it is akin to conversing in Sanskrit or base 13, but I have faked my way through with sifting through Stack Exchange posts and experimenting with tools like Regex101.

The WordPress docs offers a convoluted example based on a weird Forbes video link and I found a rather almost nil set of examples elsewhere.

I started by figuring out a regex that could match a Sodaphonic audio URL and return a match for that id part of the URL at the end. You can see, play with it, and make fun of my regex at https://regex101.com/r/v2JCWJ/1

^https?:\/\/sodaphonic.com\/audio\/([a-zAA-Z0-9]+)(.*)$

I was stumped for a while with my embeds failing, not because of my cheesy regex skiils, but that the method I saw used in the examples of the sprintf structure apparently fails when I have a “%” in my return string (I use it in the iframe to use a width of 100%). With a bit of wriggling, I swapped in my own method.

Here is working code I got going to embed both Sodaphonic and Vocaroo audio in a WordPress editor, placed in the functions.php file of the theme I was working for. It really is just a functional called in init to set up the gizmos that catch these URLs in a content area, and a handler for each to turn each URL into its embed code.

add_action( 'init', 'cdb_register_embeds' );

function dcb_register_embeds() {
	
	// handler for vocaroo audio
	wp_embed_register_handler(
		'vocaroo',
		'#^https?:\/\/(vocaroo\.com|voca\.ro)\/([a-zAA-Z0-9]+)$#i',
		'cdb_handler_vocaroo'
	);
	
	// handler for sodaphonic boombox audio
		
	wp_embed_register_handler(
		'sodaphonic',
		'#^https?:\/\/sodaphonic.com\/audio\/([a-zAA-Z0-9]+)(.*)$#i',
		'cdb_handler_sodaphonic'
	);

}


function cdb_handler_vocaroo( $matches, $attr, $url, $rawattr ) {

	$embed = '<iframe  width="100%" height="60" src="https://vocaroo.com/embed/' . esc_attr($matches[2]) .' ?autoplay=0" frameborder="0" allow="autoplay"></iframe>';

	return $embed;
}

function cdb_handler_sodaphonic( $matches, $attr, $url, $rawattr ) {

	$embed = '<iframe width="100%" height="156" scrolling="no" frameborder="no" allow="autoplay" src="https://sodaphonic.com/embed/' . esc_attr($matches[1]) .'"></iframe>';
	
	return $embed;
}

Make it a Plugin?

That’s a working example. I felt the logical step is to write it into a plugin to maybe of use to others. On creating a new Github repo I found the name I chose was already taken… by me. I had previously done one at https://github.com/cogdog/wp-embed-extras

That was one I did a few years ago as a test case, where I had taken the code I made for SPLOTbox to a more generalizable one that enabled embeds of Padlet, Internet Archive, and some experiments with H5P sources, all doable from a single pasted URL.

I updated the plugin to include now Vocaroo and Sodaphonic (I pulled the H5P, it was rife with errors from CORS, security stuff I was not invested in sorting out).

So if you want some extra media embed-ability, toss the Cogdog Auto Embed Extras WordPress Plugin into your pile. It’s a crude plugin, but you could also mine it to pull some custom auto embeds into another custom theme.