#43
  • Created on
    2009-07-14 08:13
  • Reported by
    Terence Eden
  • Status
    Fixed
  • Priority
    Lowest (5)
  • Assigned to
    AndreaTrasatti
  • Milestone
    v1.2 - Nokia themes & L10N/I18N readiness
  • Plan Level
    -
  • Due Date
    -

Attachments

Related Tickets

Add new subtask or bug

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
//$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.
User picture
  on 2009-07-15 03:17 *
By James Pearce
Milestone changed from Backlog to v1.2 - L10N/I18N readiness and other intermediate functionality
User picture
  on 2009-07-28 09: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');
?>
User picture
  on 2010-04-26 12:45 *
By AndreaTrasatti
Status changed from New to Test
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.
User picture
  on 2010-05-23 05:52 *
By AndreaTrasatti
Assigned to set to AndreaTrasatti
User picture
  on 2010-05-23 05:52 *
By AndreaTrasatti
Status changed from Test to Fixed
Part of 1.2.1 release