[Plugin: Easy FancyBox] Easy Fancy Box and HTML5 Video

Your problem is that Vimeo Video Access is private while it should be public.

No, that is not my problem. The video is hidden from Vimeo, but it shows up fine on my page. I just set it to public, however, to be sure, but the problem remains unchanged.

You can see it live here: https://www.dreiwuenschefilm.de/329-2/#fancyboxID-1

any other ideas?

<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-1">
<iframe src="https://player.vimeo.com/video/32906287?title=0&byline=0&portrait=0&color=ffffff" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<p><a href="#fancyboxID-1" class="fancybox-vimeo">Test</a></p>

…thanks for the effort, but same result…see 4 yourself.

https://www.dreiwuenschefilm.de/329-2/#fancyboxID-1

You have a Javascript Error. What is Shadowbox? If it’s not important, remove it.

I did. Still no luck. Ahrrrgghh.

Try this :

<p><a href="#fancyboxID-1" class="fancybox">Test</a></p>
<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-1">
<iframe src="https://player.vimeo.com/video/32906287?title=0&byline=0&portrait=0&color=ffffff" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>

again, no luck. it has to be something else, some javascript incompatibility, i have no idea. driving me absolutely mad…

You write :
<p><a href="#fancyboxID-1" class="fancybox-vimeo">Test</a></p>
You have to write :
<p><a href="#fancyboxID-1" class="fancybox">Test</a></p>
If it doesn’t work you try this :
<p><a href="https://player.vimeo.com/video/32906287" class="fancybox-vimeo">Test</a></p> Warning you remove DIV with id fancyboxID-1

Vimeo should display in iframe mode out of the box. No need to do difficult stuff with embedding iframes inline and then hiding them (which will also break the box when opened a second time)…

Just create a link to the Vimeo page like described in the FAQ’s and Easy FancyBox will create a lightbox with an iframe inside it. After that, it’s up to Vimeo to decide whether to show the video in Flash or HTML5 mode. You cannot force it since some videos are not available in HTML5… Also, it depends on the browser. So even if the movie is available in HTML5, it does not play as such in browsers that do not support HTML5 but falls back to Flash.

Yes, I does work great out of the box but as I said further up: all my vimeo videos have different sizes and I’m looking for a way to resize each overlay accordingly. Hence the inline solution, where I would be able to set a different size for each individual div.

any ideas for that?

it depends. are you showing these videos (links) all on the same page or on different pages/posts? if it is the latter, you can adjust individual sizes by adding some data in the class attribute like this:

class="{width:300,height:260}"

I did read the FAQ very carefully and also saw that solution, but it doesn’t work for my problem. I have a gallery of thumbnails (all on one page) that link to vimeo videos- each a different size. How do i do that?

Hmmm… I see why you are trying the iframe / inline combination. To make it work, do this:

1. Use class=”fancybox” instead of fancybox-vimeo because you are trying fancybox in inline mode (with embedded iframe, yes, but still) as opposed to iframe mode which is used for vimeo.

2. Remove the lines

<script>!window.$ && document.write('<script src="https://www.dreiwuenschefilm.de/wp-content/themes/iA3 1.2.1/assets/js/external/jquery-1.5.1.min.js"><\/script>');</script>
<script src="https://www.dreiwuenschefilm.de/wp-content/themes/iA3 1.2.1/assets/js/external/jquery.fancybox-1.3.4.min.js"></script>

from your themes footer.php

Then the test link should work. But be aware that clicking the same link a second time will show an empty box… This is a side-effect of using iframe embedded in inline content. There is a way around this ‘issue’ but it would involve hacking the plugin to create two new onComplete and onClose event function parameters as suggested bu JFK on https://groups.google.com/group/fancybox/browse_thread/thread/d7321b9a4df5b20b/

Thanks so much, but how do I hack the plugin? Do I just ad the this:

$(document).ready(function() {
var mySRC ="";
$("h2 a").fancybox({
'padding': 0,
// other API options etc
'onComplete': function() {
mySRC = $('#video_one_lightbox iframe').attr('src');
},

'onClosed': function() {
$('#video_one_lightbox iframe').attr('src',mySRC);

}
});
}); // ready

to the plugins code? but where? Sorry, but I’m in over my head here. I’m not to bad with basic stuff, but this…whew.