Embedding Videos from TVGuide

This one goes out to my fellow fansites.

There are a lot of you guys who use WordPress (probably that’s my fault) and like me, you bash your head in when a news source makes a video embedable, but only if you use their code. Why is this a problem? Most of us like using WP’s visual editor, and that means we have to switch to text mode, paste this in, and then never ever ever visit that page in the visual editor again:

<script src="http://player.ooyala.com/player.js?width=600&amp;amp;video_pcode=VlajQ6DTdv9-OYPHSJq6w4eU0Bfi&amp;amp;embedCode=NwdzM3aDp4BB3-MEdPemlMJK5XH7ZVdn&amp;amp;height=337&amp;amp;deepLinkEmbedCode=NwdzM3aDp4BB3-MEdPemlMJK5XH7ZVdn"></script>

Augh!

In part this is because WordPress uses TinyMCE for editing GUI-like, and switching between visual and text mode kills things. But on the other hand, how come we can just paste in a YouTube URL and that works? Well it’s a magical thing called Embeds, and basically WordPress sees that URL for YouTube and knows “OH, I should be a video and YouTube has a special code on it’s sever to tell me how to display it! Yay!”

Not everyone has that. TV Guide, CBS, etc. I’m looking at you. Where this makes sense is where they do not want you to embed a video because they want the traffic to themselves, which is fine. We can link. But where it’s daft is when they make it embeddable, give you that link, but it’s flipping ugly and can’t be used in the visual editor!

For TV Guide, at least, there’s a fix. Ooyala Video Browser.

While the search function doesn’t work ‘great’ right now, probably because I’m searching for their videos with the wrong keywords, but still I was able to embed a video like this:

[ooyala code="NwdzM3aDp4BB3-MEdPemlMJK5XH7ZVdn" player_id="undefined"]

The ‘code’ is the ’embedCode’ from the embed they gave me before.

I can also use this:

[ooyala code="NwdzM3aDp4BB3-MEdPemlMJK5XH7ZVdn" player_id=&"VlajQ6DTdv9-OYPHSJq6w4eU0Bfi"]

Using ‘video_pcode’ for ‘player_id’

So this wasn’t super obvious, and personally I would love it if Ooyala had an oembed and then a ‘share this on WordPress’ link for things, but seeing as Automattic (and Pete! Hi Pete!) helped with the plugin, this may be as good as it gets for now. Maybe they could marry it into the Media Uploader, below ‘Insert from URL’ – have ‘Insert from Ooyala’. Dreams. I haz them.

There’s a lot to this plugin that I didn’t need, though. After all, since I don’t have an account, I don’t need all the search stuff, so I stripped it down to just this (which is an mu-plugin):

/**
 * Ooyala Shortcodes
 * Usually for crap like TV Guide
 * Example: [ooyala video_pcode="VlajQ6DTdv9-OYPHSJq6w4eU0Bfi" width="222" embedCode="NwdzM3aDp4BB3-MEdPemlMJK5XH7ZVdn"]
 */
add_shortcode( 'ooyala', 'ooyala_shortcode' );

function ooyala_shortcode( $atts ) {
	extract(shortcode_atts(array(
		'width' => '500',
		'video_pcode' => '',
		'embedcode' => '',
		), $atts
	));

	$width = (int) $width;
	$height = floor( $width*9/16 );
		
	if ( !is_feed() ) {
		$output = '<script src="http://player.ooyala.com/player.js?video_pcode='.$video_pcode.'&amp;width='.$width.'&amp;deepLinkEmbedCode='.$embedcode.'&amp;height='.$height.'&amp;embedCode='.$embedcode.'"></script>';
	} elseif ( $options['show_in_feed']  ) {
		$output = __('[There is a video that cannot be displayed in this feed. ', 'ooyalavideo').'<a href="'.get_permalink().'">'.__('Visit the blog entry to see the video.]','ooyalavideo').'</a>';
	}
	return $output;
}

And that is that!

Ipstenu (Mika Epstein)

I’m Mika (aka Ipstenu) and I’m complicated. I’ve been on the net since the days of dedicated terminals and Novation CAT modems and solved Missionaries and Cannibals (or Goats and Cabbages) before I was six, and blog about WordPress and technical/computer things at Half Elf on Tech.

See Full Bio