WordPress Plugin - YouTube for XHTML and Mobile
This blog is XHTML 1.0 Strict. Unfortunately, the code produced by YouTube for embeding their videos isn't. Nor is it compatible with the dotMobi WordPress Mobile Pack.
This scrap of code is a WordPress Plugin. it allows me to write something like
[youtube id="p5ACl4iBGd0"]
The code then outputs either the XHTML 1.0 embeding code or the XHML-MP code which links to the mobile version of the site
function youtube_func($attr)
{
//Get the name of the Wordpress Template being used
$name = get_template();
//If this *isn't* a mobile theme
if(stristr($name, 'mobile') === FALSE)
{
//Link to embeded YouTube video source
$ytURL = "http://www.youtube.com/v/" . $attr['id'];
//XHTML 1.0 Strict way of embeding movies
$s = "<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="" . $ytURL . "">"
. "<param name="movie" value="". $ytURL . "" />"
. "</object>";
return $s;
}
else //This is a mobile theme
{
//Link to mobile YouTube
$mYtURL = "http://m.youtube.com/watch?v=" . $attr['id'];
//Image of the video
$mYtIMG = "http://i.ytimg.com/vi/" . $attr['id'] . "/default.jpg?w=128&h=96";
$s = "<a href="" . $mYtURL . "">"
. "<img src="" . $mYtIMG . "" />"
. "</a>";
return $s;
}
}
add_shortcode('youtube', 'youtube_func');
Many thanks to the Wordpress API, this excellent Wordpress Plugin Tutorial, and this Valid XHTML YouTube embed code generator.
You can download the plugin from WordPress.
Nice little plugin however if I understand it right you need to be using a mobile theme and that detects mobile users based on user agent, would it not be better to serve the embedded content depending on user agent, Would probably be a nicer experience on devices that have good browsers minus flash eg iPhone & Android. Also would work for blogs without a mobile specific theme.
You're right about it using the theme. I figured that's already doing UA lookup, so why bother doing it twice?
I'll need to dig out my iPhone & Android devices to see how they handle a YouTube vid being embeded in XHTML. However, I'd rather assume that the theme being served up is indicative of what the device supports. Besides, Android and iPhone both work fine on m.youtube.com.
Still - food for thought for V0.3!
T
You say 'incompatible' - I guess I should try it, but I wonder if you could try changing the 'strip media' setting in the Mobile Pack theme/transcoder settings.
Also it sounds like you might be volunteering to join the project at http://www.assembla.com/wiki/show/wordpress-mobile-pack 🙂
<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="http://www.youtube.com/v/0vtHwWReGU0"><param name="movie" value="http://www.youtube.com/v/0vtHwWReGU0" /></object>
I'll look at volunteering on your project 🙂
I don't notice an extra "/blog". My main website is shkspr.mobi - the blog is shkspr.mobi/blog/ for both mobile and desktop. Is that what you're seeing?
I've also added DailyMotion to the list of full web filtered. However I can't find any easy way to find a translation to their rather weird french mobile site.
<?php
/*
Plugin Name: XHTML Safe Videos
Plugin URI: http://blog.artesea.co.uk/
Description: Converts YouTube and DailyMotion embed code into correctly formed XHTML (and even displays a mobile YouTube link instead on Mobile themes)
Author: Ryan Cullen
Version: 0.3
Author URI: http://blog.artesea.co.uk/
*/
function rtc_xhtml_youtube($content) {
//Get the name of the Wordpress Template being used
$theme = get_template();
//If this *isn't* a mobile theme
if(stristr($theme, 'mobile') === FALSE) {
$content = preg_replace('|<object(.*?)(.*?)|',
'',
$content);
$content = preg_replace('|<object(.*?)(.*?)|',
'',
$content);
$content = preg_replace('|<object(.*?)(.*?)|',
'',
$content);
}
else {
$content = preg_replace('|<object(.*?)(.*?)|',
' ',
$content);
$content = preg_replace('|<object(.*?)(.*?)|',
' ',
$content);
}
return $content;
}
add_filter('the_content', 'rtc_xhtml_youtube');
?>
/*
Plugin Name: XHTML Safe Videos
Plugin URI: http://blog.artesea.co.uk/
Description: Converts YouTube and DailyMotion embed code into correctly formed XHTML (and even displays a mobile YouTube link instead on Mobile themes)
Author: Ryan Cullen
Version: 0.3
Author URI: http://blog.artesea.co.uk/
*/
function rtc_xhtml_youtube($content) {
//Get the name of the Wordpress Template being used
$theme = get_template();
//If this *isn't* a mobile theme
if(stristr($theme, 'mobile') === FALSE) {
$content = preg_replace('|<object(.*?)(.*?)|',
'',
$content);
$content = preg_replace('|<object(.*?)(.*?)|',
'',
$content);
$content = preg_replace('|<object(.*?)(.*?)|',
'',
$content);
}
else {
$content = preg_replace('|<object(.*?)(.*?)|',
' ',
$content);
$content = preg_replace('|<object(.*?)(.*?)|',
' ',
$content);
}
return $content;
}
add_filter('the_content', 'rtc_xhtml_youtube');