Month: February 2013

Every now and then you find an interesting support question in the WordPress forums. A member wanted to take the HTML YouTube oEmbed code and modify it to suit his needs.

It was an easy set of requirements.

1. Replace ?feature=oembed with ?wmode=transparent
2. Append add wmode=”Opaque” to the end of the start iframe tag

My solution was to find all of the embeded YouTube <iframe…> tags in the post and modify the_content via a filter with some preg_match_all code.

You can see the code I came up with via this pastebin.com link.

It’s a nice enough solution and really highlights the point I was trying to make:

You do not have to hack existing code in WordPress to get the results you want.

Just use the available WordPress filters to modify the output as you need.

Jan? You do know you got that completely wrong right?

Yes. Yes I do. Well maybe not completely wrong but the code I posted was not the best solution.

I filtered the content because I’m used to playing in that space and it’s so easy to do. But my solution did not work for the person asking because what he was referring to did not output via the_content. He had to add another filter to make it work.

The original question was about how to modify oEmbed output. That’s a completely different filter and using the right one gets you a targeted solution that will work (should work anyways) at any place the oEmbed output is used.

Last year Mika Epstein posted a plugin called Rickroll that does exactly what it sounds like. It takes oEmbed video and replaces it with the Rickroll video.

You can learn a lot looking at other people’s code. It also has exactly what I needed to examine and make the modification to the YouTube oEmbed html.

Here’s the new code in a plugin.

add_filter('embed_oembed_html','mh_adjustyoutube',10,3);
function mh_adjustyoutube( $html, $url, $args ) {
if ( strstr($url, 'youtube.com') ) {
	// Replace ?feature=oembed
	$mh_new = str_replace( "?feature=oembed" , "?wmode=transparent" , $html );
	// Append wmode="Opaque"
	$mh_new = preg_replace( '/></iframe>$/' , ' wmode="Opaque">' , $mh_new );
	$html = $mh_new;
}
// Modified or not return $html
return $html;
}

This has fewer lines, simpler logic, and it is a solution that specifically filters the oEmbed output. It directly addresses the original question and can be used where ever the oEmbed code gets outputted.

You can see an easier to read version via this new pastebin.com link.

The lesson I learned is this: using WordPress filters is a powerful feature but using them correctly is even better.