Using flowplayer with fancybox
Playing videos in lightbox using fancybox and flowplayer
checkout the address below for another usage
(http://jsfiddle.net/kuyabiye/8hnKC/5/)
HTML
<script src="http://dl.dropbox.com/u/6696146/cdn/fancybox/jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/6696146/cdn/fancybox/jquery.fancybox-1.3.4.css">
<script src="http://dl.dropbox.com/u/6696146/cdn/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="http://dl.dropbox.com/u/6696146/cdn/flowplayer/flowplayer-3.2.6.min.js"></script>
<ul>
<li>
<a class="play" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
aaa</a></li>
<li>
<a class="play" href="http://blip.tv/file/get/KimAronson-TwentySeconds58192.flv">
<img src="http://lorempixum.com/50/50/sports/2" /></a>
</li>
</ul>
CSS
.fancybox-ie .fancybox-bg {
background: #000 !important;
}
JavaScript
$('.play').click(function(e) {
e.preventDefault();
var _this = $(this),
_video_link = _this.attr('href');
var lightbox_container = $('<div/>')
.attr('id', 'lightbox-player')
.css({
width: 424,
height: 301,
display: 'block'
});
lightbox_container.appendTo('body');
$f('lightbox-player', {
src: 'http://dl.dropbox.com/u/6696146/cdn/flowplayer/flowplayer-3.2.7.swf'
}, {
clip: _video_link
});
$.fancybox({
content: lightbox_container,
scrolling: false,
titleShow: false,
padding: 0,
/* ie fix. use cleanup instead of closed. Cleanup works before closing the lighbox. */
onCleanup: function() {
$f('lightbox-player').unload();
}
});
});