jQuery : Multiple Videos In Lightbox

gistfile1

Multiple videos in Lightbox / Overlay

Dependencies:
http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js
http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js

The CSS

<style>
    .overlay {
        background:url(white.png) no-repeat;
        padding:40px;
        width:576px;
        display:none;
    }

    .close {
        background:url(close.png) no-repeat;
        position:absolute;
        top:2px;
        display:block;
        right:5px;
        width:35px;
        height:35px;
        cursor:pointer;
    }

    a.player  {
        display:block;
        height:450px;
    } 
</style>


The JavaScript 

<script>
    jQuery(document).ready(function($) {
        $(function() {
            //setup overlay actions to anchors
            $("a[rel]").overlay({
                onLoad: function(content) {
                    // find the player contained inside this overlay and load it
                     this.getOverlay().find("a.player").flowplayer(0).load();
                },
                onClose: function(content) {
                    $f().unload();
                }
            });
                // install flowplayers
                $("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
        });
    });

</script>


The HTML

    <a rel="overlay1" href="#">
        <img src="image1.png" />
    </a>

    <a rel="overlay2" href="#">
        <img src="image2.png"/>
    </a>

    <div id="overlay1" class="overlay" style="background-image:url('white.png')">
        <a id="player" href="video.mp4">
            &nbsp;
        </a>
    </div>

    <div id="overlay2" class="overlay" style="background-image:url('white.png')">
        <a id="player" href="video.mp4">
            &nbsp;
        </a>
    </div>