jquery fancybox still playing video inline after closing in FF and IE

Question

So this is my html

<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>

<div id="aboutbarrybio" class="bio_wrapper" style="display: none;">
<div class="about_video">
    <div class="video_wrapper">
        <div class="placard" style="display: none;"><img width="720" height="405" style="cursor:pointer;" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png"></div>
        <div style="display: block;" class="thevideo">
            <embed width="720" height="405" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/9bZkp7q19f0&amp;autoplay=1&amp;rel=0">
        </div>
    </div>
</div>

This is my javascript for fancybox:

$(".aboutusbox").fancybox({
  padding       : 1,
  width         : 960,
  afterShow     : function() {
    $('.fancybox-opened .placard').each(function(){
        $('.fancybox-opened .placard').show();
        $('.fancybox-opened .thevideo').hide();
    });

    $('.fancybox-opened .placard').click(function(){
        $('.fancybox-opened .placard').hide();
        $('.fancybox-opened .thevideo').show();
    });
  },
  afterClose    : function() {
    $('.fancybox-inner').empty();
  }
});

Trying to replace video with image placard, then use inline hidden box to show in fancybox. Problem is that if user closes while video is playing on Firefox (and IE?) it still plays in the background. Chrome works as intended. Is there any way to mitigate minus iframe/ajax, youtube api or just using the video itself?

Answer 1

Without needing to have an inline video (and the related issues) you can do :

• link directly to the video (to get the href),
• open fancybox and set the placard image as content,
• bind a click to the placard image and then replace it by the youtube content (inside the afterShow callback).

Additionally, you could pass the image/video dimensions from within the link using (HTML5) data-* attributes so instead of this :

<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>

... you could do this :

<a id="about_barry" class="aboutusbox" href="http://www.youtube.com/v/9bZkp7q19f0&amp;autoplay=1&amp;rel=0" data-width="720" data-height="405">Link to Bio</a>

Then use this script to show the placard image and replace it on click by the youtube video :

$(document).ready(function () {
    $(".aboutusbox").fancybox({
        padding: 0,
        fitToView: false, // fancybox won't auto-resize to fit in viewport
        // set placard image as content
        content: '<img class="placard" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png" width="720" height="405" alt="placard" />',
        scrolling: 'no',
        afterShow: function () {
            // get dimensions from data attributes
            var $width = $(this.element).data('width');
            var $height = $(this.element).data('height');
            // create youtube content
            var newContent = "<iframe src='" + this.href + "' frameborder='0' allowfullscreen width='" + $width + "' height='" + $height + "'></iframe>";
            // replace content on placard click
            $(".fancybox-inner").on("click", ".placard", function () {
                $(".fancybox-inner").html(newContent);
            });
        }
    });
}); // ready

See JSFIDDLE demo.

NOTICE that .on() requires jQuery 1.7+