The method you are currently using is loading the video inline in a hidden div, then loading that div in fancybox.
I would follow a different approach: I would link to my videos directly and load them dynamically once fancybox is opened. That has the advantage that videos are not present in the DOM until they are required. Also you can use a single script for multiple videos so :
<a href="path/video01.mp4" class="fancybox">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox">Click here to start movie no 2</a>
To make things more flexible, each video could have its own dimensions (video may not have the same size always) passing its height and width using the (HTML5) data-* attribute like :
<a href="path/video01.mp4" class="fancybox" data-width="352" data-height="270">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox" data-width="640" data-height="360">Click here to start movie no 2</a>
Then use this single script :
$(document).ready(function () {
$(".fancybox").fancybox({
fitToView: false, // to show videos in their own size
content: '<span></span>', // create temp content
scrolling: 'no', // don't show scrolling bars in fancybox
afterLoad: function () {
// get dimensions from data attributes
var $width = $(this.element).data('width');
var $height = $(this.element).data('height');
// replace temp content
this.content = "<embed src='pathToPlayer/jwplayer.swf?file=" + this.href + "&autostart=true&wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>";
}
});
}); // ready
See DEMO
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
