HTML5 video lightbox

<div class="summary">The links below will open a video light box that will never exede the height or width of your current window when it is opened or resized. It will dynamically load a video url based on the vidUrl attribute.</div> <div class="video-link" vidUrl="">My Favorite Brunette - Click to Play</div> <div class="video-link" vidUrl="">The House on Haunted Hill - Click to Play</div> <div class="overlay vid-link" vidUrl="#"></div> <div class="main-vid-box"> <div class="videoWrapper"> <video autoplay="autoplay" class="myVideo" src="" frameborder="0" controls></video> </div> </div> <img class="close vid-link" vidUrl="#" src="">
body{ font-family:sans-serif; margin:0px; padding:0px; } .summary{ display:block; position: relative; width:90%; margin:0 auto; padding:20px 0 20px 0; text-align:center; } .video-link{ cursor:pointer; display:block; position: relative; width:90%; max-width:400px; background-color:#336699; margin: 0 auto 10px auto; text-align:center; color:#fff; padding:20px 0 20px 0; transition: all 0.5s; } .video-link:hover{ background-color:#000; } .overlay{ position: fixed; top:0px; left: 0px; height:100%; width:100%; z-index: 100; background-color: rgba(0, 0, 0, 0.9); opacity:0.9; display:none; } .close{ position: fixed; top:30px; right:30px; width:16px; height:16px; z-index:9999; display:none; cursor: pointer; } .main-vid-box{ position: fixed; width: 100%; height:100vh; display:none; top:0px; left:0px; z-index: 999; } .videoWrapper { position: relative; z-index:999; background-color:#000; width:100%; height: 100%; margin:0 auto; } .videoWrapper video { position: relative; top: 0; left: 0; z-index: 999; width: 100% !important; height: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-width: 40px; border-style: solid; border-color: transparent; }
$( document ).ready(function() { $('.video-link').click(function() { $('.myVideo').attr("src", $(this).attr("vidUrl")); $('.overlay').fadeIn(500, function(){ $('.main-vid-box').fadeIn(500); $('.close').fadeIn(500); }); }); $('.close, .overlay').click(function() { $('.overlay').fadeOut(500); $('.myVideo').attr("src", $(this).attr("vidUrl")); $('.main-vid-box').fadeOut(500); $('.close').fadeOut(500); }); });
Expand for more options Login