-2
Well, I don’t have much HTML experience, I’ve tried and I can’t get the video to stop playing when closing the POP-UP window.
If anyone can help or give a hint thank you.
<!DOCTYPE html>
<html>
<head>
<style>
/** Donna Galletta | LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
/** videoModal **/
#videoModal {
border-radius: 0;
width: 100%;
margin: auto;
}
#videoModal .modal-header {
background: #000;
border: 0;
color: #fff;
position: relative;
height: 35px;
}
#videoModal .modal-header h3 {
font-size: 18px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
}
#videoModal .modal-body {
height: 489px;
padding: 0;
max-height: none;
overflow: hidden;
}
#videoModal .modal-footer:empty {
display: none !important;
}
#videoModal .close {
background: #DB00B8;
color: #fff;
font-size: 24px;
margin: 0;
opacity: 1;
position: absolute;
right: 0;
text-shadow: none;
top: 0;
width: 38px;
}
</style>
</head>
<body>
<!-- thumbnail wrapped in a link -->
<a href="#img1">
<img src="https://live.staticflickr.com/65535/50535826153_58450a4c61_o.png" height="30">
</a>
<!-- lightbox container hidden with CSS -->
<div>
<a href="#_" class="lightbox" id="img1">
<div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-header">
<button type="button" class="close full-height" data-dismiss="modal" aria-hidden="true">X</button>
<h3>Donna Galletta- Showreel</h3>
</div>
<div class="modal-body"><iframe width="100%" height="489" src="https://www.youtube.com/embed/SvuoDerqNW0" frameborder="0" allowfullscreen=""></iframe></div>
<div class="modal-footer"></div>
</div>
</a>
</div>
</body>
</html>
But if I have something like that, how do I do it? <video width="400" Controls> <source src="mov_bbb.mp4" type="video/mp4"> </video>
– kasten
In this case, within the script, you can delete the creation part of the player and replace the
player.stopVideo();
within the click event byvar media = document.querySelector("#player"); media.pause(); media.currentTime = 0;
. And also add aid="player"
in the tag <video>– Paulo Daniel
Thanks! Thanks for the help! It worked for me!
– kasten