CODEWITHSUNDEEP
jqueryfirefoxyoutubefancybox
Jeffz
Jeffz

Reputation: 2105

Fancybox with YouTube movie in FireFox does not close entirely - see demo

Window closes, but movie still plays in background.

When you close and recall fancy, you can see movie continuing to play.

See this link with demo (click on small YouTube icon):

http://reference.xarray.org.uk/pages.php/fancy-problem-jp-59

[edited: now link above behaves correctly - as problem was fixed - see: answer on the bottom]

Anyone knows how to remedy that?

Upvotes: 0

Views: 654

Answers (2)

Jeffz
Jeffz

Reputation: 2105

OK .. after some research .. here it is.

Instead of calling swf object directly:

<a class="fancy_freehand" href="#myId" rel="fancybox" style="outline-style: none; text-decoration: none; "><img alt="" src="/images/user/jmvc_yt.png" /></a></p>
<div style="display:none;">
  <div id="yEJw" style="width:auto; height:auto;">
    <object data="http://www.youtube.com/v/a2RA0vsZXf8?fs=1&amp;autoplay=1&amp;hd=1" height="576" id="close_player" type="application/x-shockwave-flash" width="1024">
      <param name="movie" value="http://www.youtube.com/v/a2RA0vsZXf8?fs=1&amp;autoplay=1" />
      <param name="allowFullScreen" value="true" />
      <param name="allowscriptaccess" value="always" />
      <param name="wmode" value="transparent" />
    </object>
 </div>
</div>

... it is best to give credit to fancy box author(s) and do it his (their) way (note: 'iframe' class):

<a class="fancy_freehand iframe" href="http://www.youtube.com/embed/a2RA0vsZXf8?autoplay=1"><img alt="" src="/images/user/jmvc_yt.png" /> </a>

It will make Chrome complaining about:

Unsafe JavaScript attempt to access frame with URL

but it is a minor side effect

tested in all recent versions of all browsers - IE:7,8,9

check same link (also works in FF): http://reference.xarray.org.uk/pages.php/fancy-problem-jp-59

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

Add following line in fancybox initialization script: 

callbackOnClose: function() { 
    $("#fancy_content").empty(); 
}

OR

callbackOnClose: function() { 
    $("#fancy_content").html(" "); 
}

Example 1: $("#fancy_content").empty(); 

 $("a[rel=fancybox], .fancybox").fancybox({ 
  'overlayShow'     : false, 
  'zoomSpeedIn'     : 600, 
  'zoomSpeedOut'      : 500, 
  'easingIn'        : 'easeOutBack', 
  'easingOut'       : 'easeInBack', 
  callbackOnClose: function() { 
    $("#fancy_content").empty(); 
  } 
});

Example 2: $("#fancy_content").html(" ");

 $("a[rel=fancybox], .fancybox").fancybox({ 
  'overlayShow'     : false, 
  'zoomSpeedIn'     : 600, 
  'zoomSpeedOut'      : 500, 
  'easingIn'        : 'easeOutBack', 
  'easingOut'       : 'easeInBack', 
  callbackOnClose: function() { 
    $("#fancy_content").html(" "); 
  } 
});

Upvotes: 1

Related Questions