Vimeo & YouTube embedding using iframes?

conigs · February 2011

Is there any plan to update the Vimeo & YouTube auto-formatting? Both recently updated to use iframes instead of objects to better account for mobile & non-flash viewing. Looking at class.format.php, it seems do-able, since it already gets the video ID, but sniffing out the proper dimensions seems like it would be an issue.

conigs · March 2011

So if anyone is still curious about this, I changed the following lines in /library/core/class.format.php

Change line 559 from:

<div class="Video"><object width="$Width" height="$Height"><param name="movie" value="http://www.youtube.com/v/$ID&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/$ID&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="$Width" height="$Height"></embed></object></div>

to:

<div class="Video"><iframe title="YouTube video player" width="$Width" height="$Height" src="http://www.youtube.com/embed/$ID" frameborder="0" allowfullscreen></iframe></div>

And line 566 from:

<div class="Video"><object width="$Width" height="$Height"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=$ID&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=$ID&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="$Width" height="$Height"></embed></object></div>

to:

<div class="Video"><iframe src="http://player.vimeo.com/video/$ID" width="640" height="360" frameborder="0"></iframe></div>

This will allow YouTube & Vimeo embeds to auto detect the browser and serve up the appropriate format for the device it is being viewed on.

uniclue · April 2011

I changed the lines as you mentioned above, but nothing comes up when I post th iframe code form youtube.

conigs · April 2011

The code kicks in only when a youtube or vimeo url is pasted in, not the embed code. I had some other tweaks to HTMLawed to allow iframes only from the youtube & vimeo domains, but that's separate from this.

chadvonnau · May 2011

Thanks, conigs. Your code works well. Hopefully the next release of Vanilla incorporates this. I made a few more tweaks to class.format.php in addition to yours:
* made the www. optional in the youtube regex (www\.)?
* changed the $Width/$Height variables to 640 x 390 for youtube, and 640 x 360 for vimeo
* Changed the vimeo iframe code to use the $Width/$Height variables instead of being hardcoded
* See the changes here: https://gist.github.com/951102

I had one problem. Whenever I put a < code > < /code > block into the same post as a youtube link, the youtube video doesn't display. Any idea why that would happen?

Also, How did you configure Vanilla to allow iframes from youtube & vimeo?

conigs · May 2011

I actually had to go in and edit the HtmLawed plugin to allow an iframe, then put a conditional statement later on to only allow iframes for the vimeo & youtube domains.

dkodr · May 2011

I actually had to go in and edit the HtmLawed plugin to allow an iframe, then put a conditional statement later on to only allow iframes for the vimeo & youtube domains.

Could you please share that piece of code?

conigs · May 2011

In plugins/class.htmlawed.plugin.php, remove 'iframe' from line 45. Then change the HTMLawedHookTag function from

function HTMLawedHookTag($Element, $Attributes) {
   $Attribs = '';
   foreach ($Attributes as $Key => $Value) {
      if (strcasecmp($Key, 'style') == 0) {
         if (strpos($Value, 'position') !== FALSE || strpos($Value, 'z-index') !== FALSE || strpos($Value, 'opacity') !== FALSE)
            continue;
      }

      $Attribs .= " {$Key}=\"{$Value}\"";
   }
   return "<{$Element}{$Attribs}>";
}

To:

function HTMLawedHookTag($Element, $Attributes) {
   $Attribs = '';
   if($Element == 'iframe') {
      if(strpos($Attributes['src'],'http://player.vimeo.com') !== FALSE || strpos($Attributes['src'],'http://www.youtube.com') !== FALSE) {
         foreach ($Attributes as $Key => $Value) {
            $Attribs .= " {$Key}=\"{$Value}\"";
         }
         return "<{$Element}{$Attribs}>";
      } else { return ""; }
   } else {
      foreach ($Attributes as $Key => $Value) {
         if (strcasecmp($Key, 'style') == 0) {
            if (strpos($Value, 'position') !== FALSE || strpos($Value, 'z-index') !== FALSE || strpos($Value, 'opacity') !== FALSE)
               continue;
         }
         $Attribs .= " {$Key}=\"{$Value}\"";
      }
      return "<{$Element}{$Attribs}>";
   }
}

I'm sure there's a more elegant way to do this without so many conditional statements, but this was a quick & dirty job.

rysliv · August 2011

bullS%it it doesn't even work. Why the hell cant I just put a embed video in my forum. Its just a pain in the ass to work with VNC searching each file in the forum for something related to iframe. VNC should die too cuz its much worse than rdp.

i did everything this thread said. No changes, my youtube link still sits there not popping up any videos or anything.

Laura999 · August 2011

>:( i'm also having this problem... is there no way to hardcode it in even?!

Laura @ puppy training

stephanhahne · November 2011

Has anybody tried this in .18.1? I'd like to use the html5 players here, too. The code, however, doesn't seem to work here, it is a bit more complex.

I changed the first row already (line 836), but it seems, that I have to change something else. Has anybody done this already?

      $InOut = $Matches[1];
      $Tag = strtolower($Matches[2]);
//      $End = $Matches[3];
//      $Url = $Matches[4];

      if ($InOut == '<') {
         $InTag++;
         if ($Tag == 'a')
            $InAnchor = TRUE;
      } elseif ($InOut == '</') {
         $InTag++;
         if ($Tag == 'a')
            $InAnchor = FALSE;
      } elseif ($Matches[3])
         $InTag--;

      if (!isset($Matches[4]) || $InTag || $InAnchor)
         return $Matches[0];
      $Url = $Matches[4];

      if ((preg_match('`(?:https?|ftp)://www\.youtube\.com\/watch\?v=([^&]+)`', $Url, $Matches) 
         || preg_match('`(?:https?)://www\.youtu\.be\/([^&]+)`', $Url, $Matches)) 
         && C('Garden.Format.YouTube')) {
         $ID = $Matches[1];
         $Result = <<<EOT
<div class="Video"><iframe title="YouTube video player" width="$Width" height="$Height" src="http://www.youtube.com/embed/$ID; frameborder="0" allowfullscreen></iframe></div>
EOT;
      } elseif (preg_match('`(?:https?|ftp)://vimeo\.com\/(\d+)`', $Url, $Matches) && C('Garden.Format.Vimeo')) {
         $ID = $Matches[1];
         $Result = <<<EOT
<div class="Video"><object width="$Width" height="$Height"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=$ID&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=$ID&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="$Width" height="$Height"></embed></object></div>
EOT;
      } else {
         $nofollow = (self::$DisplayNoFollow) ? ' rel="nofollow"' : '';

         // Strip punctuation off of the end of the url.
         $Punc = '';
         if (preg_match('`^(.+)([.?,;:])$`', $Url, $Matches)) {
            $Url = $Matches[1];
            $Punc = $Matches[2];
         }

est · May 2012

I confirm that this code does not work [line 236]:

<div class="Video"><iframe title="YouTube video player" width="$Width" height="$Height" src="http://www.youtube.com/embed/$ID; frameborder="0" allowfullscreen></iframe></div>

Still no solution?

Vanilla 2.0.18.4

Jakobba · October 2012

It worked for me, thank you @conigs...

nairaman · October 2012

The only solution is just to obey the native code in that config file. That is just paste the n@ked link, and make sure it starts with http://www. and not just www.

If you don't understand, please read my post here: http://ask.nairaman.com/discussion/17

BenIGamify · April 2013

Do you know how to get the embed to work on mobile devices when you are using Vimeo instead of youtube?

I have it so the embed code works on web browsers but the video is not displaying on mobile devices... any ideas?

vrijvlinder · April 2013

Have you tried the plugin Mediator ? What is the mobile device it does not display on? remember these are flash objects even if they are in an iframe and will not play on an iPhone unless you use photon browser.

http://vanillaforums.org/addon/mediator-plugin

hgtonight · April 2013

@BenlGamify

Which version of Vanilla are you running? IIRC, some mobile themes disable embedding by default. You might look into your themehooks file.

Vimeo & YouTube embedding using iframes?

Comments