Lightbox with html5 video player

Uses jQuery, CSS and HTML. Centers lightbox based on width of viewport.

by BinaryAcid

HTML

<script src="http://jslib.dotcloud.com/fiddle-require.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

<button id="search-submit">open lb</button>
<div id="lightbox"></div>
<div id="lb-content">
     <span id="lb-close">x</span>
    <!-- p>Wow!! Look at that. So simple.</p -->


<!-- video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="540" height="264" poster="my_video_poster.png"
  data-setup="{}">
  <source src="http://sherwin.vo.llnwd.net/o10/cc/videos/BeckerAcroma_loop2011.mp4" type='video/mp4'>
      
</video -->

    
</div>

CSS

body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    text-align: center;
    display: none;
}  
#lb-content {
    color: #222;
    height: 250px;
    width: 300px;
    border: 16px solid #222;
    background-color: #fff;
    position: relative;
    text-align: center;
    padding-top: 10px;
    border-radius: 4px;
    display: none;
}
#lb-close {
    display: block;
    height: 22px;
    width: 25px;
    background-color: red;
    color: #fff;
    position: absolute;
    top: -25px;
    right: -25px; 
    cursor: pointer;
    text-align: center;   
    border-radius: 10px;    
}

JavaScript

var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');

var positionLightbox = function() {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 148,
        lbContent = $('#lb-content');

    lbContent.css({
        'left' : lbContentMargin,
        'top' : $(window).scrollTop() + 50 + 'px'
    });
};

$('#search-submit').click(function() {
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
});