Sounds continues on pause and stop with autoplay video.js in Fancybox

Question

I am trying to use video.js in a Fancybox pop up with autoplay. The video autoplays as expected, but when I pause or close the window the sound continues. I tried to use "onClose" and "afterClose" to remove the player, but it didn't help.

Here is a link to my page: http://dev.sterlingklor.com/projects/ilovetreasury/events/1tc-2013#video21

$(document).ready(function () {
    var videobox = $('#video').first();
    $(".various").fancybox({
        fitToView: true,
        autoSize: true,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none',
        href: this.href,
        content: '<video autoplay preload="none" width="640" height="360" controls="controls"><source src="video.mp4" type="video/mp4">your browser does not support the HTML 5 video tag</video>',
        onClosed: function () {
            $('video').remove();
        },
        afterClose: function () {
            $('video').remove();
        }
    });
});

Thanks for any help.

Answer 1

I've created a fiddle here attempting to do what you are trying.

I first created a standalone video element and container and hid them. This should eliminate the 2+ audio tracks by always being the same video element and not creating a new one on each click.

Then I set up fancy box to reset the video to 0 and tell it to play on showing (afterShow). And told it to pause before closing (beforeClose).

notice

the video does use the autoplay attribute and includes preload="meta" to ensure the video length is known when we try to set the currentTime.

Let me know if you need anything else!