Modal Video
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<meta name="description" content="HTML5 Modal Video">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML5 Video</title>
</head>
<body>
<div class="video-link" vidUrl="https://archive.org/download/RefreshingLo/RefreshingLo.mp4">The Refreshing Look</div>
<div class="video-link" vidUrl="https://archive.org/download/my_favorite_brunette/my_favorite_brunette_512kb.mp4">My Favorite Brunette</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">
</body>
</html>
CSS
body{
font-family:sans-serif;
margin:0px;
padding:0px;
}
.video-link{cursor:pointer;}
.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);
});
});
