The iPhone needs the embed tag in the youtube embed code. It wont work with just the object tag

The youtube embed code is in youtube.inc file

I tried overriding the function in my template but it didnt work
This is the function - function theme_emvideo_youtube_flash

tried this

function mytheme_theme_emvideo_youtube_flash

and

function phptemplate_theme_emvideo_youtube_flash

neither worked

However editing the youtube.inc file and adding the embed tag to the youtube code works

Now it works like a charm

You can set the video to display at 640x385 youtube widescreen and it still works on the iphone
So you have a big desktop video that also works on the iPhone

Great that you are trying to produce code that validates, but it wont work on the iPhone
I did a test using just the object tag myself and it wouldnt work

Also if you try and use the swfobject.js it just says you need to install flash when you view on the iPhone

Here the function

The only thing i have changed is to add the embed tag

/**
* The embedded flash displaying the youtube video.
*/
function theme_emvideo_youtube_flash($embed, $width, $height, $autoplay, $options = array()) {
  static $count;
  $output = '';
  if ($embed) {
    $fullscreen = isset($options['fullscreen']) ? $options['fullscreen'] : variable_get('emvideo_youtube_full_screen', 1);
    $fullscreen_value = $fullscreen ? "true" : "false";
    $fs = $fullscreen ? "&fs=$fullscreen" : "";
    $related = isset($options['related']) ? $options['related'] : variable_get('emvideo_youtube_show_related_videos', 0);
    $related = "rel=$related";
    $autoplay = isset($options['autoplay']) ? $options['autoplay'] : $autoplay;
    $autoplay_value = $autoplay ? '&autoplay=1' : '';
    $show_colors = isset($options['show_colors']) ? $options['show_colors'] : variable_get('emvideo_youtube_show_colors', FALSE);
    $colors = '';
    if ($show_colors) {
      $color1 = isset($options['color1']) ? $options['color1'] : variable_get('emvideo_youtube_colors_color1', emvideo_YOUTUBE_COLOR1_DEFAULT);
      $color2 = isset($options['color2']) ? $options['color2'] : variable_get('emvideo_youtube_colors_color2', emvideo_YOUTUBE_COLOR2_DEFAULT);
      $colors='&color1=0x'. emvideo_youtube_convert_color($color1) .'&color2=0x'. emvideo_youtube_convert_color($color2);
    }
    $border = isset($options['border']) ? $options['border'] : variable_get('emvideo_youtube_show_border', FALSE);
    $border = $border ? '&border=1' : '';
    $enablejsapi = isset($options['enablejsapi']) ? $options['enablejsapi'] : variable_get('emvideo_youtube_enablejsapi', TRUE);
    $enablejsapi = $enablejsapi ? '&enablejsapi=1&playerapiid=ytplayer' : '';
    $id = isset($options['id']) ? $options['id'] : 'emvideo-youtube-flash-'. (++$count);
    $div_id = isset($options['div_id']) ? $options['div_id'] : 'emvideo-youtube-flash-wrapper-'. $count;
    $high_quality = isset($options['high_quality']) ? $options['high_quality'] : variable_get('emvideo_youtube_high_quality', FALSE);
    $high_quality = $high_quality ? '&ap=%2526fmt%3D18' : '';
    $display_info = isset($options['display_info']) ? $options['display_info'] : variable_get('emvideo_youtube_display_info', FALSE);
    $display_info  = $display_info  ? '&showinfo=0' : '';
    $url = "http://www.youtube.com/v/$embed&$related$autoplay_value$colors$border$high_quality$display_info$enablejsapi$fs";
    if (variable_get('emfield_swfobject', FALSE) && (module_exists('swfobject_api') || variable_get('emfield_swfobject_location', ''))) {
      if (module_exists('swfobject_api')) {
        $params['width'] = $width;
        $params['height'] = $height;
        $params['div_id'] = $id;
        $params['allowFullScreen'] = $fullscreen_value;
        $output .= theme('swfobject_api', $url, $params, $options, $id);
      }
      else {
        drupal_add_js(variable_get('emfield_swfobject_location', ''));
        $output .= <<<FLASH
          <div id="$div_id">
            Sorry, you need to install flash to see this content.
          </div>
          <script language="JavaScript" type="text/javascript">
            swfobject.embedSWF("$url", "$div_id", "$width", "$height", "8");
          </script>
FLASH;
      }
    }
    else {
      $output .= <<<FLASH
        <div id="$div_id"><object type="application/x-shockwave-flash" height="$height" width="$width" data="$url" id="$id">
          <param name="movie" value="$url" />
          <param name="allowScriptAcess" value="sameDomain"/>
          <param name="quality" value="best"/>
          <param name="allowFullScreen" value="$fullscreen_value"/>
          <param name="bgcolor" value="#FFFFFF"/>
          <param name="scale" value="noScale"/>
          <param name="salign" value="TL"/>
          <param name="FlashVars" value="playerMode=embedded" />
          <param name="wmode" value="transparent" />
<embed width="$width" height="$height" allowfullscreen="$fullscreen_value" allowscriptaccess="always" type="application/x-shockwave-flash" src="$url"></embed>
        </object></div>
FLASH;
    }
  }
  return $output;
}
Files: 
CommentFileSizeAuthor
#1 516236.patch812 bytesRobLoach

Comments

RobLoach’s picture

Version:6.x-1.2» 6.x-1.x-dev
Priority:Critical» Normal
Status:Active» Needs review
StatusFileSize
new812 bytes

Like this?

aaron’s picture

Status:Needs review» Needs work

uggh, stupid iphone. that breaks html standards, and we'd worked hard to get this stupid thing working for ff & ie, but be web compliant. then iphone comes along and breaks the whole thing....

i'll have to revisit this; sorry, am not going to put this in the current release, as i don't have time right now :(

CinemaSaville’s picture

Version:6.x-1.x-dev» 6.x-1.0-beta1

So has this been handled? Would be great if we could get these YouTube embeds to function properly on iPhone like "Smart YouTube" plugin for Wordpress. With the mobile/iPhone explosion I would consider this crucial functionality.

RobLoach’s picture

Version:6.x-1.0-beta1» 6.x-1.x-dev

No, it hasn't been handled. I consider this an iPhone problem, the YouTube videos outputed by Embedded Media Field work perfectly on the Android.

CinemaSaville’s picture

So how is the SmartTube plugin accomplishing this?

catorghans’s picture

I placed the function in my theme and applied the #1 patch. It does work now in my Iphone and FF.

Does it break working in IE or Android now?

(The name of this function in your theme should be #theme#_emvideo_youtube_flash (or phptemplate_emvideo_youtube_flash )

CinemaSaville’s picture

Where do you put the function in the theme? I just applied the patch, and it worked fine in Safari and FF as well, but I wouldn't mind making extra sure.

CinemaSaville’s picture

Version:6.x-1.x-dev» 6.x-1.9
Assigned:» Unassigned
Category:bug» support

This has stopped working now on the iPhone. The embed tags no longer work. Anyone got any ideas?

gilf’s picture

subscribe

rout’s picture

subscribe

aaron’s picture

Title:Youtube.inc needs embed tag to work on iPhone» Support YouTube on iPhone
Project:Embedded Media Field» Media: YouTube
Version:6.x-1.9» 6.x-1.0
Component:Providers» Code
Category:support» feature

Moving to the Media: YouTube queue. I don't have an iPhone, so am unable to help with this. Can you point me to the Smart YouTube plugin, I can see how wp does it (assuming that method still works).

mandclu’s picture

There's also a good (and standards compliant) method for providing an iPhone-friendly YouTube embed here:
http://learningtheworld.eu/2009/youtube-embed/

aaron’s picture

Status:Needs work» Fixed

Thanks, @surge_martin. I modified the code for the fallback method, so please try that (committed to the dev branch of Media: YouTube). If this doesn't work, please re-open.

CinemaSaville’s picture

Hi, I installed this module, and upon enabling it, I got the following message:

Fatal error: Cannot redeclare emvideo_youtube_info() (previously declared in /home/socalmov/public_html/sites/all/modules/emfield/contrib/emvideo/providers/youtube.inc:29) in /home/socalmov/public_html/sites/all/modules/media_youtube/providers/emvideo/youtube.inc on line 46
array(4) { ["type"]=> int(64) ["message"]=> string(158) "Cannot redeclare emvideo_youtube_info() (previously declared in /home/socalmov/public_html/sites/all/modules/emfield/contrib/emvideo/providers/youtube.inc:29)" ["file"]=> string(88) "/home/socalmov/public_html/sites/all/modules/media_youtube/providers/emvideo/youtube.inc" ["line"]=> int(46) } n/a

Am I meant to remove YouTube.inc from the providers folder in emvideo?

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

smzur22’s picture

subscribing

ceerwk’s picture

subscribing

joebest’s picture

Your solution worked like a charm! Can something like this be implemented for Blip.tv?

Daniel J Wilcox - Blocked for personal attacks’s picture

Blip.tv's embed player use's .flv files and not mp4 videos

If you upload an mp4 to blip.tv and use their embedded player it will still use a .flv and not the mp4
So Blip.tv embedded players wont work on the iPhone

You can visit your page on blip.tv on the iPhone and it will deliver the mp4, but it wont work embedded on your site

Youtube is the only video sharing site i know of whose embedded player works on the iPhone

Thats because Apple and Google have close links, Google re encoded all their videos as h264 so they could work on mobile devices like the iPhone

If you are using blip.tv you could upload an mp4, grab the link and then use the new html5 video tag to add the video
You have to build an html5 site theme first

You can use the video tag in xhtml and it will work but wont validate

Heres an example of an html5 page i built for a client

http://noelclarke.s3.amazonaws.com/4321/4321_video.html

It you use Safari or Chrome on the desktop you get a large mp4 in the html5 video tag
If you use any other browser it falls back to Flash
Visit the page on the iPhone and you get a smaller mobile version of the mp4

The Flash fallback is automatically generated with a couple of lines of jquery

I also have this working in a xhtml5 Drupal site im working on

I use the embed tag for Flash and not the swfobject
The page also validates as html5

I explain how it works in greater details in this comment

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-v...

Mac Clemmens’s picture

@Daniel ... In blip they offer the option to convert the file to m4v, which allows it to work on the iPhone. You might need a pro account (or pro account trial) to do this, however.

Daniel J Wilcox - Blocked for personal attacks’s picture

Yes blip.tv pro will let you create m4v files, but they have discontinued their embedded quicktime player.

So you cant embed the m4v in your site, you would have to grab the link to the m4v and create the embed code manually.

smzur22’s picture

Issue is fixed in iPhone OS 4.

renderfreak’s picture

Great! The dev module fixed the issue for me... thx!!!