Skip to content

Instantly share code, notes, and snippets.

@alkrauss48
Last active September 14, 2015 15:56
Show Gist options
  • Save alkrauss48/63e8bfad25c8bbcf5fee to your computer and use it in GitHub Desktop.
Save alkrauss48/63e8bfad25c8bbcf5fee to your computer and use it in GitHub Desktop.
Responsive Video Lightbox that will always view on 16:9 resolution at maximum screen height/width
function closeVideo(){
$('#dark-overlay').fadeOut(500);
$('#iframe-wrapper').fadeOut(500);
$('#iframe-wrapper').find('iframe').attr('src', '');
}
$(document).ready(function(){
$('a.close-video').click(function(e){ closeVideo(); });
$('a.play-now').click(function(e){
e.preventDefault();
$('#dark-overlay').fadeIn(500);
$('#iframe-wrapper').fadeIn(500);
$('#iframe-wrapper').css('height', '85%');
$('#iframe-wrapper').css('max-width',
(parseInt($('#iframe-wrapper').css('height')) * 16 / 9) + 'px' );
// If max-width is larger than the viewport width, then shrink the height
if(parseInt($('#iframe-wrapper').css('max-width')) > $(window).width()){
// subtract 20 to give a little padding on mobile devices
$('#iframe-wrapper').css('max-width', $(window).width() - 40 + 'px' );
$('#iframe-wrapper').css('height', $(window).width() * 9 / 16 + 'px');
}
setTimeout(function(){
$('#iframe-wrapper').find('iframe').attr('src', $(this).data('src'));
}.bind(this), 500);
});
$('#dark-overlay').on('click', function(){ closeVideo(); });
});
$(document).keyup(function(e) {
// Add escape button control to exit the lightbox
if(e.keyCode == 27 && $('#dark-overlay').is(":visible")) { closeVideo(); }
});
#dark-overlay {
position: fixed;
display: none;
top: 0; left: 0;
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
}
#iframe-wrapper {
max-width: 55em;
margin-left: auto;
margin-right: auto;
display: none;
position: relative;
top: 10%;
height: 85%;
text-align: center;
}
#iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.close-video {
font-weight: bold;
text-decoration: none;
color: white;
cursor: pointer;
display: inline-block;
font-size: 2em;
width: 12px;
position: absolute;
top: -40px;
right: 0%;
}
<body>
<!-- Put this directly below your body -->
<div id="dark-overlay">
<div id="iframe-wrapper">
<a class="close-video">×</a>
<iframe src="" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>
</div>
</div>
.
.
.
<a class="play-now" data-src="a_link" href="#">Play Video</a>
@alkrauss48
Copy link
Author

Now updated with ESC-button control to close out of the lightbox

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment