Monday, June 25, 2018
overlay with youtube video simple
overlay with youtube video simple
Its very simple but I didnt 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;} 