<section id="video"> <a href="#" class="topopup"> <img src="images/play.png" alt="Play company video" title="Play company Video"/> </a> <div id="toPopup"> <div class="close"></div> <div id="popup_content"> <video width="100%" height="auto" controls> <source src="video/AM1.mp4" type="video/mp4"> <source src="video/AM2.webm" type="video/webm"> <source src="video/AM3.ogg" type="video/ogg"> Video format not supported by your browser </video> </div> </div> </div> <div id="backgroundPopup"></div> </section>
#video { background: #ecf0f1; /*light gray*/ } #video img { width: 36.11%; max-width: 252px; } #backgroundPopup { position: fixed; display:none; height:100%; width:100%; background:#000000; top:0px; left:0px; } #toPopup { background: none repeat scroll #000; margin-left:10%; margin-right:10%; height:auto; display: none; position: fixed; top: 10%; z-index: 1; }
$(this).keyup(function (event) { if (event.which == 27) // 27 is 'Ecs' in the keyboard disablePopup(); // function close pop up }); $(this).keyup(function (event) { if (event.which == 27) stop('#video'); }); $("div#backgroundPopup").click(function () { disablePopup(); // close pop up }); $("div#backgroundPopup").click(function () { stop('#video'); // stop video });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)