iframe vimeo content is blank second time lightbox is loaded?

[w1ntermut3]

Using code as:

<div style="display:none;">
<div class="lightbox_content" id="video_one_lightbox">
<iframe src="http://player.vimeo.com/video/21864555?portrait=0"
width="600" height="383" frameborder="0"></iframe>
</div>
</div>

<h2 id="video_one_title"><a rel="fancybox" href="#video_one_lightbox"
title="Video One Title">Video One Title</a></h2>

==============================================================================================
$('h2 a').fancybox({
'padding': 0,
'scrolling': 'no',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': $(this).attr('title'),
'width': 600,
'height': 383
});



The first time the link is clicked, the Vimeo video appears in the
lightbox as expected. If I close the lightbox (via close button or
clicking on screen overlay), then the second time the link is clicked,
a blank lightbox appears - no content is loaded in the iframe.

Currently affecting IE9, Chrome, FF4.

Any ideas?

[JFK]

there was a similar issue reported here
http://groups.google.com/group/fancybox/browse_thread/thread/1fd249d5f2bbd88e/

the issue:
in fancybox v1.3.2+ inline content is "moved" into the fancybox and a
(hidden) temp container is left instead.
the issue occurs when you have iframes tags as inline content.
first time you fire fancybox, the iframe (tag) is moved into fancybox
but once you close the fancybox, the "moved" iframe (tag) moves back
to its original position in the document and it looses the value of
its src attribute and gets a value of "about:blank" hence that the
second time fancybox is fired it just displays an empty (blank) box.

the workaround:
Cache the value of the src attribute while the iframe (tag) is moved
into the fancybox
then restore this value to the iframe tag once fancybox is closed

so your script should look like:
$(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

by the way, you don't need this line
'title':$(this).attr('title')

to learn more about fancybox title, have a look at this:
http://groups.google.com/group/fancybox/browse_thread/thread/3da14d88af2393cc/

[w1ntermut3]

That fixed the issue perfectly. Many thanks :)

[Tomáš Procházka]

Hello there.

I have similar problem. Only, in my iframe, there is a div containing a form. After second clict, the iframe goes white (or transparent -  depends on fancybox background). I tried to apply and modify Your code, but I am not so strong in Java and it didn't worked. Could you help me please?

My code is:

<script type="text/javascript">

$(document).ready(function() {

var mySRC =""; 

$(".fancybox").fancybox();

$("a.fancybox").attr('rel', 'gallery').fancybox();

});

</script>

PS. What about an update of the fancybox. Would it solve it?

[JFK]

what version of fancybox are you using?
don't worry about java, fancybox is a jQuery (javascript) based plugin ;)