All Articles

Fixing YouTube embeds in Wordpress

In some wordpress themes, youtube embeds just show up as a black screen. As discussed here, the solution is adding a transparency setting to the iframe’s src.

However, the solution in that thread only works if the src is right next to the frameborder. Updated code below if you are running into this problem

function add_video_wmode_transparent( $html ) {
	$pattern = '#(src="https?://www.youtube(?:-nocookie)?.com/(?:v|embed)/([a-zA-Z0-9-]+).")#';
	preg_match_all( $pattern, $html, $matches );

	if ( count( $matches ) > 0) {
		foreach ( $matches[0] as $orig_src ) {
			if ( !strstr($orig_src, 'wmode=transparent' ) && !strstr( $orig_src, 'hd=1' ) ) {
				$add = 'hd=1&wmode=transparent"';

				if ( !strstr($orig_src, '?') ) {
					$add = '?' . $add;
				}
				$new_src = substr( $orig_src, 0, -1 ) . $add;
				$html = str_replace( $orig_src, $new_src, $html );
			}
		}
	}
	return $html;
}
add_filter( 'the_content', 'add_video_wmode_transparent', 10 );

New thread in the wordpress forums can be found here. (The original was closed)

Published 10 May 2013

Code. Comics. Crossfit
Tim Broder on Twitter