Beginner Trying Use Fancybox With Vimeo iFrame Code

[Chuck]

My skill level in html and CSS is beginner-intermediate. My skill
level in jQuery is extreme beginner (I've devoted about 8 hours to
learning it so far).

What I'm try to is do is use the fancybox with Vimeo iframe code such
as the following: <iframe src="http://player.vimeo.com/video/15382867?
title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="640"
height="480" frameborder="0"></iframe>

I've devoted about four hours to this but I'm not getting anywhere; I
just don't know what to do. The methodology behind the sample code on
the Fancybox site relating to YouTube video, and even the code
underlying the samples of Vimeo videos on the Fancybox blog, doesn't
seem to apply to the current iframe code that Vimeo generates. If
there is anyone willing to help me out with a simple example of how to
implement this, i.e., just code showing a link that would trigger a
fancybox with the iFrame code above generating the video inside it, I
would be very grateful.

[JFK]

did you try the examples here?
http://fancybox.net/vimeo

(check at the source code)

[Chuck]

Yes, but I don't believe they are applicable, because I'm a Vimeo Plus
member and the code I'm implementing is entirely different. The code
in the examples is for embedding a .swf file, which is not what I'm
trying to do. The new functionality of Vimeo Plus gives you code that
serves html5 video, and only uses Flash for a fallback.

The code in the example is:
'href' : 'http://vimeo.com/moogaloop.swf?clip_id=9503416',
'type' : 'swf'

The code I'm been given from Vimeo is:

<iframe src="http://player.vimeo.com/video/15382867?
title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="640"
height="480" frameborder="0"></iframe>

On Feb 11, 5:07 am, JFK <jfk.d...@gmail.com> wrote:
> did you try the examples here?http://fancybox.net/vimeo

[JFK]

now I see ...you rather use type iframe than swf
you could open the vimeo video with this code

<a class="vimeo" href="http://player.vimeo.com/video/15382867?
title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff">open vimeo</a>

<script type="text/javascript">
$(document).ready(function() {
$('.vimeo').fancybox({
'padding': 0, //optional
'width': 640, //or whatever
'height': 480, //or whatever
'type': 'iframe'
});
}); //ready
</script>

[Chuck]

Thanks so much JFK, you solved my problem!

[jp]

Hi, this also worked for me but I have one problem: the vimeo video's controls don't work... instead it still picks up the underlying gallery - so when clicking on a vimeo control it opens one of my other gallery items that are underneath the vimeo fancybox currently open.

Any ideas on this?

Thanks!

[JFK]

you may need to reduce the size of the clickable are of the navigation arrows 

check this (CSS) code for fancybox v1.3.4 : http://jsfiddle.net/eAZ3T/1/

also check for reference

https://groups.google.com/forum/?fromgroups=#!topic/fancybox/H9dhc0mx6II

[TT]

I came across this page because I'm having problems with vimeo and fancybox.

-I first tried the iframe steps on the fancybox site. No luck.

-Tried the code from fancybox.net/vimeo and that makes the video open full screen.

-Tried the code JFK posted above, and now I just get a spinning loading icon and the video never opens. 

I tried the normal URL for my video, then I tried the link in the code vimeo gives for embedding. One of them was opening the actual vimeo site.

I've tried so many different ways, my head is spinning! Any idea what I'm doing wrong?

[Emilia Lazecki]

Hi everybody, TT Did you resolve it? I have the same problem that you!

[John Farrell]

TT, we need your code or a link to a page where we can see this in action and diagnose the issue. Unfortunately without doing this, it is nigh on impossible to tell you what the issue is.