iframe 동영상 재생 onclick (팝업 사용) 팝업 일시 중지 close

Question

이미지를 클릭하면 iframe/youtube 비디오가있는 팝업이 토글됩니다. 재생하려면 비디오를 다시 클릭해야합니다. 팝업을 클릭하면 (비디오를 사라지게하기 위해) 비디오는 여전히 재생됩니다 (오디오는들을 수 있지만 비디오는 사라집니다). 자바 스크립트 만 사용하고 현재 팝업 코드를 구현하여 동영상을 일시 중지하는 방법이 있습니까? 또한이 코드는 클릭 할 수있는 이미지에 호버링 오버레이를 사용합니다. 단지 상황을 더 복잡하게 만듭니다.

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%; 
} 

자바 스크립트

function myFunctionlowery() { 
    var popup = document.getElementById("lowery"); 
    popup.classList.toggle("show"); 
} 

을 heres 사이트 : http://wellscreate.com/video/

Answer 1

당신은 YT API를 사용하여 매우 easly 그 작업을 수행 할 수 있습니다 :