HTML5 video lightbox
HTML
<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="https://archive.org/download/my_favorite_brunette/my_favorite_brunette_512kb.mp4">My Favorite Brunette - Click to Play</div>
<div class="video-link" vidUrl="https://archive.org/download/The_House_On_Haunted_Hill/The_House_On_Haunted_Hill_512kb.mp4">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="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close.svg">
CSS
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;
}
JAVASCRIPT
$( 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);
});
});
1 Response