Support for embedding Vimeo video **in LightBox2**?

If you use the emfield (embedded media) video module you can display vimeo videos on your site. Lightbox2 integrates with that so you can display the video in a lightbox.

Cheers,
Stella

What about simply using Lightbox without Embedded Media module, as Google, Youtube, MySpace, and others enjoy with the Lightbox module now?

@thechraveler: no, I'm not willing to consider that at this time. In fact, I'd be more likely to remove support for the Google, YouTube, etc videos and make people use emfield for those too, before I'd add support for any more 3rd party providers.

Cheers,
Stella

I'm reopening this issue because I still can't get Lightbox2 to display Vimeo videos. A working example of vimeo code would be extremely helpful, an example like that for all the other video formats shown here: http://drupal.org/node/252276.

Vimeo does not supply the syntax in its embed instructions or in its API. Vimeo's embed code is this:
<object width="400" height="225"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=337298&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=337298&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed></object>

I've tried using that and just about every kind of abbreviation of that in my Drupal code, such as this:

 <a rel="lightvideo[group][caption 2]" href="http://vimeo.com/moogaloop.swf?clip_id=337298">Grouped example 2</a> <br />

. The video only opens in a new window.
I'm using Drupal 6.09, I've installed and pointed to an flvplayer, I'm using embedded media field and embedded video field, and I've enabled Vimeo display according to all the instructions. Also, I can get Google and other videos to play in Lightbox2, just not Vimeo.

Has anyone out there gotten this to work?

I'm not sure what you're doing, but if using emfield video module as you say, then you just need to select one of the Lightbox2 options from the 'display' options when configuring that content type. It should work then without any problems and without any need for you to write html. The instructions at http://drupal.org/node/252276 aren't needed for emfield module.

Cheers,
Stella

Okay, I finally figured out the syntax for Vimeo in LightBox. It might help to add it to http://drupal.org/node/252276 where the syntaxes for other videos are listed.
The correct syntax is this:
<a rel="lightvideo" href="http://vimeo.com/4559447">

What Vimeo gives you is this, BTW, and you have to winnow it down to the above.
<object width="400" height="225"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4559447&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4559447&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed></object><p><a href="http://vimeo.com/4559447">#2 Flying Kebab - The things I do for you babe</a> from <a href="http://vimeo.com/matheussiq8">Matheus Siqueira</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

Hope this helps someone!

I can't get this to work. It jumps to the vimeo site. Anything else we need to know?

Here are more details:
Drupal 6.11

Syntax: <a rel="lightvideo" href="http://vimeo.com/2729374" id="video11"><img height="38" width="50" alt="Something" src="/thumbs/something.jpg" /></a>

Modules:
LightBox2 6.x-1.9, Embedded Media Field, Embedded Video Field 6.x-1.0-beta1

Config:
Embedded Media Field / Use swfobject: Off
Embedded Video Field / Vimeo configuration / Allow content from Vimeo: Checked

Does that do the trick?

I couldn't get Vimeo working using lightvideo method described above. I did manage to find a solution using lightfame with the code below.

<a href="http://vimeo.com/moogaloop.swf?clip_id=videoid" rel="lightframe[|width:400px;height:300px;padding:0;][We can add some text here]">Play Vimeo</a>

Hope this is of use to people.

Anyone figure out a way to autoplay the vimeo video in the lightbox2 ?

In the "exiled_hammer " solution it`s possible to make the vimeo fullscreen button to work?

I can't get this to work. I can't install emfield in 6.16, and have lightbox 2 installed. Please help me!

In lightbox_video.js, add the following function:

  checkVimeoVideo: function(href) {
    var patterns = [
      'vimeo.com/([^/]*)'
      ];

    for (var i = 0; i < patterns.length; i++) {
      var pattern = new RegExp(patterns[i], "i");
      var results = pattern.exec(href);
      if (results !== null) {
        Lightbox.videoId = results[1];
        Lightvideo.createEmbed("http://www.vimeo.com/moogaloop.swf?clip_id="+Lightbox.videoId, "flvvideo", "#ffffff");
        return true;
      }
    }
    return false;
  }

and edit:

  // checkKnownVideos()
  checkKnownVideos: function(href) {
    if (Lightvideo.checkYouTubeVideo(href) || Lightvideo.checkGoogleVideo(href) ||
      Lightvideo.checkMySpaceVideo(href) || Lightvideo.checkLiveVideo(href) ||
      Lightvideo.checkMetacafeVideo(href) ||
      Lightvideo.checkIFilmSpikeVideo(href) || Lightvideo.checkVimeoVideo(href)
      ) {
      return true;
    }
    return false;
  },

This is a fast trick, but it does the job. The HTML code should look like:

    <a href="http://www.vimeo.com/xxxxxxx" rel="lightvideo[|width:700;height:400;padding:0;][]" id="video11"><img src="<image>"></a>

Hi,

Thanks everyone for all the helpful posts above - I now have Lightbox2 up & running alongside Vimeo on my site, using Emfield.

However, I was wondering if anyone can please tell me how to prevent the scroll bars appearing along the right side & bottom of the lightbox when it opens? These scroll bars appear regardless of what size I make the lightbox... The video pretty much fits into the box, there is just a tiny bit of white space around the edges.

Any tips of ideas would be greatly appreciated. Thanks.

P.S. I followed Martijn Houtman's steps in the last post.

I use this in my style.css

#lightbox #modalContainer {overflow:hidden;}
#lightbox #imageData #bottomNav {height:20px;}
#bottomNavClose {margin-top:0px; padding-top:0px}

Works great.

Hey all, I rolled a patch from #17 above. It's meant to work with version 6.x-1.11 of the lightbox2 module.

Beautiful, the patched worked for me. Thank you all for spending the time to figure this out :)

I spent a long time trying to set up Emfield with Lightbox2 for vimeo.

Eventually I found that colorbox for vimeo is a much easier option.

To autoplay simply add '&autoplay=true' at the end of your embed src url

http://drupal.org/node/1206814#comment-4682710

http://drupal.org/project/colorbox

i used the submission #17 it worked very good but the films doesn't appear on the ipads as it appear white window only any help regarding this

lobo235: Thank you all for spending the time to figure this out too.

Please accept this patch. It works!

I've been using #20 for a while on my site, and it works.
But #23 makes a valid point: no ipad support (as it needs flash).

I've changed #20 to create an iframe embed for vimeo.
Please review.

Confirming that patch #25 works perfectly.

Thanks

The patch in #25 needs the $Id tag removed, other than that it works great!

I've rolled a patch for 7.x

Cheers

Patch #27 works for me on 7.x-2.10! Thx!!

Thanks, rerolled and pushed