Is it possible to add support for Vimeo videos?
ITMW, is there a way to embed the Vimeo player in a lightbox? (excuse the newbie question)

Comments

stella’s picture

Category:feature» support
Status:Active» Fixed

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

Anonymous’s picture

Status:Fixed» Closed (fixed)

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

thechraveler’s picture

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

stella’s picture

@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

Dracolyte’s picture

Title:Support for embedding Vimeo video?» Support for embedding Vimeo video **in LightBox2**?
Status:Closed (fixed)» Active

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?

stella’s picture

Status:Active» Fixed

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

Status:Fixed» Closed (fixed)

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

Dracolyte’s picture

Status:Closed (fixed)» Fixed

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!

monstordh’s picture

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

Dracolyte’s picture

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?

davidjg’s picture

For whatever it's worth

drupal 6.12
emfield 6.x-1.0
lightbox2 6.x-1.9

Under admin/content/emfield
Swfobject unticked
Allow content from vimeo

Create content type (e.g. "videocontent") or add field to existing one with "embedded video" field type. Check vimeo as provider, configure sizes etc under manage fields tab.

Set display options under Display Fields tab to whichever lightbox2 option you have/want.

Create a "videocontent" node, put

<a rel="lightvideo" href="http://vimeo.com/xxxxxx" id="video11">Vimeo-Lightbox2 Test</a>

in the "Video:" url field (not in body), xxxxx is the vimeo id.

exiled_hammer’s picture

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.

Status:Fixed» Closed (fixed)

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

rolandk’s picture

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

festerm’s picture

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

ts230’s picture

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

Martijn Houtman’s picture

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>
gaffnere’s picture

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.

KarimB’s picture

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.

lobo235’s picture

Version:master» 6.x-1.11
StatusFileSize
new1.16 KB

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

emcniece’s picture

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

rolandk’s picture

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

rooky’s picture

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

mezitlab’s picture

Status:Closed (fixed)» Needs review

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

Please accept this patch. It works!

thijsvdanker’s picture

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.

dexiecarla’s picture

Issue summary:View changes

Confirming that patch #25 works perfectly.

Thanks

acbramley’s picture

Version:6.x-1.11» 7.x-1.x-dev
StatusFileSize
new1.57 KB

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

I've rolled a patch for 7.x

Cheers