Flowplayer in Fancybox

click handler which will open fancybox with a flowplayer object

by billjohnston4

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<script src="http://flowplayer-core.googlecode.com/svn/flowplayer/branches/3_2_6/example/flowplayer-3.2.6.min.js"></script>
<a class="videoLink" href="http://www.shinesoftware.eu/documents/wiki/easyfatt/video1.flv">Video 1</a>
<a class="videoLink" href="http://www.shinesoftware.eu/documents/wiki/easyfatt/video2.flv">Video 2</a>
<a class="videoLink" href="http://www.shinesoftware.eu/documents/wiki/easyfatt/video3.flv">Video 3</a>
<a class="videoLink" href="http://www.shinesoftware.eu/documents/wiki/easyfatt/video4.flv">Video 4</a>

JavaScript

$('a.videoLink').click(function(e) {
    //Intercept the link's default behavior
    e.preventDefault();
    //Create a container
    var container = $('<div/>');
    //install flowplayer
    container.flowplayer('http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', $(this).attr('href'));
    //Launch fancybox with the flowplayer as content
    //Be sure to set dimensions and disable autoDimensions & scrolling
    $.fancybox({
        content: container,
        width: 300, height: 200,
        scrolling: 'no',
        autoDimensions: false
    });
});