Last active
September 14, 2015 15:56
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Now updated with ESC-button control to close out of the lightbox