Question

i’m using jquery to place video with flowplayer skin in a hidden div in my page to make it play in fancybox

$("a.videoLink").click(function(){
    var videoFile = "products_video/" + $(this).attr("videofile");
    var videoPoster = $(this).attr("videofile");
var videoCode = '<a href='+videoFile+' id="player" style="display:block;width:600px;height:400px;"></a><script language="JavaScript">flowplayer("player", "flowplayer-3.2.7.swf")</script>';
    $("#videoPlayer").html(videoCode);
    $.fancybox({
        'transitionIn' : 'fade',
        'transitionOut' : 'fade',
        'href' : '#videoPlayer'
        });
    });

this is the hidden div

<div style="display: none;">
<div id="videoPlayer"></div>
</div>

when i click any of the images of the video it starts playing in fancybox but the problem is when i close the fancybox video starts playing from the beginning in the hidden div
how to stop the video if the fancybox is closed?

Answer 1

Because the API options in your script, I assume you are using fnacybox v1.3.x, aren’t you?

What is happening here is that fancybox moves the inline content into the fancybox container and leaves a temp container inside the hidden DIV instead. Then your video starts playing inside the modal box.

When you close fancybox, it removes the temp container and moves back the content from the fancybox container into the inline hidden DIV, so your video starts playing again there (as it did when it was moved into fancybox).

As a workaround, try adding these two options to your fancybox script:

'onClosed': function() {
 $("#videoPlayer").empty();
},
'onCleanup': function() {
 var myContent = this.href;
 $(myContent).unwrap();
}

The first option removes the video from the hidden inline content (so no more video in the background) and the second option fixes a bug described here when working with inline content.

So the part of the fancybox script should look like:

// videoCode script here etc
$.fancybox({
 'transitionIn' : 'fade',
 'transitionOut' : 'fade',
 'href' : '#videoPlayer',
 'onClosed': function() {
  $("#videoPlayer").empty();
 },
 'onCleanup': function() {
  var myContent = this.href;
  $(myContent).unwrap();
 } 
}); // fancybox
// close click and ready etc