jquery - Video-popup loses background & breaks on scroll in Chrome -
i'm trying create website, on there multiple animations , multiple video's, when click on animation in first video popup comes works perfectly..
however when click on animation in 2nd video video-popup breaks, buttons , white-background of video fall behind full-screen-background-video, know why?
html popup-video:
browser doesn't support video element. meer informatie direct afsluitencss pop-up video:
.popupinfo{ display: none; padding: 15px; background:white; border: 1px solid white; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; margin: -20px 50px 0 -20px; z-index: 99999; box-shadow: 0px 0px 3px white; -moz-box-shadow: 0px 0px 3px white; -webkit-box-shadow: 0px 0px 3px white; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #mask{ display: none; background: white; position: fixed; left: 0; top: 0; z-index: 88888; width: 100%; height: 100%; opacity: 0.5; }
html second background-video under first:
<video preload="auto" autoplay="autoplay" loop="loop" id="background2"> <source src="background/background2.mp4" type="video/mp4"> </source> <source src="background/background2.ogv" type="video/ogg"> </source> <source src="background/background2.webm" type="video/webm"> </source> </video>
css second background-video:
#background2{ width: 100%; height: 100%; position: relative; min-width: 50%; min-height: 50%; z-index: -1; }
css both video's:
video { background:transparent url('../button/loading.gif') no-repeat 0 0; -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; -o-background-size: 100px 100px; background-size: 100px 100px; background-position: center; }
css mask behind video (which falls behind background-video in chrome)
#mask{ display: none; background: white; position: fixed; left: 0; top: 0; z-index: 88888; width: 100%; height: 100%; opacity: 0.5; }
jquery making video-popup appear:
$("#vidklik1").on('click', function(){ bvideo2.pause(); showplaceholder(); showvid(); changevideoto("fragmenten/real_schade"); $("#video").load(); $('#video').attr("autoplay", "autoplay"); });
it behaves in google chrome.. in firefox works normal, there work-around this?
edit:the buttons remain clickable , when go different tab , come website, works , appears should.
Comments
Post a Comment