I have an image, that when clicked, toggles a popup with an iframe/youtube video. The video must be clicked again to be played. When you click off the popup (to make the video disappear) the video still plays (you can hear the audio, but the video is gone). Is there a way to pause the video using only javascript and implementing my current popup code? Also this code uses a hovering overlay on the clickable image...just to make things more complicated.
HTML:
<div class="popup" onclick="myFunctionlowery()">
<img src="http://wellscreate.com/wp-
content/uploads/2017/11/7K0C0970.00_05_07_29.Still003.jpg" alt="" style="" />
<div class="coverlay">
<span class="popuptext" id="lowery">
<div style="position:relative; top:10vh; width:100%; max-width:1000px;
margin:0 auto;">
<iframe style="width:100%; max-width:1000px; height:50vw;
max-height:700px;" src="https://www.youtube.com/embed/O46xDFbhHtg?
enablejsapi=1" frameborder="0" allowfullscreen>
</iframe>
</div>
</span>
</div>
</div>
CSS
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
display:none;
width: 100vw;
height:100vh;
background: rgba(0,0,0,.8);
border-radius: 6px;
position: fixed;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
display:block;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.coverlay{position:absolute;
bottom: 10px;
left: 0;
right: 0;
height: 100%;
width: 100%;
background: rgba(250,250,250,.0);
border-radius: 8px 8px 0 0;
transition: background .5s;
background-image:url("http://wellscreate.com/wp-
content/uploads/2017/11/Untitled-1-01.png");
background-position: center bottom;
background-repeat:no-repeat;
background-size:15%;
}
.coverlay:hover{
background: rgba(250,250,250,.5);
background-image:url("http://wellscreate.com/wp-
content/uploads/2017/11/Untitled-1-01.png");
background-position: center;
background-repeat:no-repeat;
background-size:16%;
}
JavaScript
function myFunctionlowery() {
var popup = document.getElementById("lowery");
popup.classList.toggle("show");
}
heres the site: http://wellscreate.com/video/
