overlay with youtube video - simple

It's very simple but I didn't spent too much time.

you just need to add your image with x.png

paste the js or include it in an external .js file.


JS


<script>
$(document).ready(function(){


var overlay = jQuery('<div id="overlay"></div><div id="box" class="videoWrapper"><iframe src="https://www.youtube.com/embed/B-HCMfaOkL0?autoplay=1&rel=0&enable_js=1" frameborder="0" allowfullscreen></iframe></div><div id="closebox"><img src="images/x.png" /></div>');
overlay.appendTo(document.body).fadeIn('fast');

    $("#box").width($(window).width());
    $("#box").height($(window).height());
    $("#box").css('width','90%');
    $("#box").css('margin-left','5%');
    $("#box").css('margin-right','5%');
   
     $("#closebox").click(
     function(){
         $('#overlay').fadeOut('fast');
         $('.videoWrapper iframe').attr('src', '');
         $('#box').hide();
         $('#closebox').hide();
     });

     //chiusura emergenza
     $('#overlay').click(
     function(){
        $(this).fadeOut('fast');
        $('.videoWrapper iframe').attr('src', '');
        $('#box').hide();
        $('#closebox').hide();
     });
   
     $(document).on('keyup',function(evt) {
        if (evt.keyCode == 27) {
             $('#overlay').fadeOut('fast');
             $('#box').hide();
        }
    });
});

$(window).resize(function(){
    $("#box").width($(window).width());
    $("#box").height($(window).height());
    $("#box").css('width','90%');
    $("#box").css('margin-left','5%');
    $("#box").css('margin-right','5%');
});

</script>



and add a bit of css

CSS

#overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;opacity: .7; filter: alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";z-index: 10000;}
#box{ width:90%; height:90%; display:none;position:absolute; left:0%; top:0%;z-index: 10001;}
#box iframe{width:100%;height:100%}
#closebox{ position: fixed; top: 0px;right: 0px;z-index: 10001;padding:4px;}