WordPress Plugin - YouTube for XHTML and Mobile
WordPress YouTube · 11 comments · 250 words · read ~837 times.
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.
Hi Terence, 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.
I'm sure there are many better ways to do things - it's just V0.2 🙂
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
Um... sounds like a feature that the Mobile Pack should support natively (i.e. through spotting desktop YT fragments and changing them).
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 🙂
Also I noticed that switching between desktop & mobile sites on your blog adds in an extra '/blog' to the path. What settings do you have on the switcher domain settings? You shouldn't need the /blog part suffixed on them.
I do have strip media switched on, but it doesn't strip out the XHTML 1.0 YouTube code <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?
very useful plugin! Good work...
Using your code for inspiration I've done something similar with an unpublished plugin. Instead of using the shortcodes it using preg_replace to find the poor code which members of the team blog will have just copied and pasted and replace it with the XTHML instead.
Source code? Would love to see what you've done.
I'm sure there could be exceptions to the way someone embeds the code and my regex is never great. 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'); ?>
I'm sure there could be exceptions to the way someone embeds the code, 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.
/* 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');
Looks like Wordpress has removed all the code. Will email it across instead.