YouTube - convert embedded to point to mobile
[meta: my first ticket, please let me know if I've done it from :-)]
As discussed at http://shkspr.mobi/blog/index.php/2009/07/wordpress-plugin-youtube-xhtml-mobile/
Issue: Embedded YouTube videos don't show up when using the WPMP.
Solution: Links to YouTube should converted to link to the mobile version of YouTube
Proposed Output: This should take the form of a hyperlinked image
Caveats: The most popular way of embedding a video is
However, there may be other ways.
As discussed at http://shkspr.mobi/blog/index.php/2009/07/wordpress-plugin-youtube-xhtml-mobile/
Issue: Embedded YouTube videos don't show up when using the WPMP.
Solution: Links to YouTube should converted to link to the mobile version of YouTube
Proposed Output: This should take the form of a hyperlinked image
//$id is the "v=" part of the query string. http://www.youtube.com/watch?v=p5ACl4iBGd0
//Link to mobile YouTube
$mYtURL = "http://m.youtube.com/watch?v=" . $id;
//Image of the video
$mYtIMG = "http://i.ytimg.com/vi/" . $id . "/default.jpg?w=128&h=96"; //w & h can be changed depending on the device's screen resolution.
$s = "<a href=\"" . $mYtURL . "\">" . "<img src=\"" . $mYtIMG . "\" />" . "</a>";
Caveats: The most popular way of embedding a video is
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/p5ACl4iBGd0&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/p5ACl4iBGd0&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
However, there may be other ways.
Leave a comment
on 2009-07-15 11:17 *
By James Pearce
Milestone changed from Backlog to v1.2 - L10N/I18N readiness and other intermediate functionality
on 2009-07-28 17:18 *
By Terence Eden
Ryan has given us this Regexp which he's happy for us to use.
<?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(.*?)<embed(.*?)width="(.*?)"(.*?)height="(.*?)"(.*?)src="(.*?)/v/([^"^&]+)(.*?)"(.*?)>(.*?)</object>|',
'<object type="application/x-shockwave-flash" style="width:$3px; height:$5px;" data="$7/v/$8"><param name="movie" value="$7/v/$8" /></object>',
$content);
$content = preg_replace('|<object(.*?)<embed(.*?)src="(.*?)/v/([^"^&]+)(.*?)"(.*?)width="(.*?)"(.*?)height="(.*?)"(.*?)>(.*?)</object>|',
'<object type="application/x-shockwave-flash" style="width:$7px; height:$9px;" data="$3/v/$4"><param name="movie" value="$3/v/$4" /></object>',
$content);
$content = preg_replace('|<object(.*?)<embed(.*?)src="http://www.dailymotion.com/swf/([^"^&]+)(.*?)"(.*?)width="(.*?)"(.*?)height="(.*?)"(.*?)>(.*?)</object>|',
'<object type="application/x-shockwave-flash" style="width:$6px; height:$8px;" data="http://www.dailymotion.com/swf/$3"><param name="movie" value="http://www.dailymotion.com/swf/$3" /></object>',
$content);
}
else {
$content = preg_replace('|<object(.*?)<embed(.*?)width="(.*?)"(.*?)height="(.*?)"(.*?)src="(.*?)/v/([^"^&]+)(.*?)"(.*?)>(.*?)</object>|',
'<a href="http://m.youtube.com/watch?v=$8"><img src="http://i.ytimg.com/vi/$8/default.jpg?w=128&h=96" width="128" height="96" /></a>',
$content);
$content = preg_replace('|<object(.*?)<embed(.*?)src="(.*?)/v/([^"^&]+)(.*?)"(.*?)width="(.*?)"(.*?)height="(.*?)"(.*?)>(.*?)</object>|',
'<a href="http://m.youtube.com/watch?v=$4"><img src="http://i.ytimg.com/vi/$4/default.jpg?w=128&h=96" width="128" height="96" /></a>',
$content);
}
return $content;
}
add_filter('the_content', 'rtc_xhtml_youtube');
?>
Changed wpmp_transcoder_remove_media() in wpmp_transcoder.php so that we can define some string replacement rules. One rule defined that will turn object tags as copied from YouTube to a link to youtube mobile. Youtube will/should take care of the appropriate delivery method.
See http://plugins.trac.wordpress.org/browser/wordpress-mobile-pack/trunk/plugins/wpmp_transcoder/wpmp_transcoder.php?rev=234092
We could add a new option to avoid media removal for high-end browsers, this way the video will be embedded properly.
See http://plugins.trac.wordpress.org/browser/wordpress-mobile-pack/trunk/plugins/wpmp_transcoder/wpmp_transcoder.php?rev=234092
We could add a new option to avoid media removal for high-end browsers, this way the video will be embedded properly.
Part of 1.2.1 release