iframeの動画を再生onclick（ポップアップあり）とポップアップを閉じると一時停止する

Question

私は画像をクリックすると、iframe/youtubeの動画でポップアップを切り替える。再生するにはビデオを再度クリックする必要があります。ビデオを消すためにポップアップをクリックすると、ビデオはまだ再生されます（オーディオは聞こえますが、ビデオは消えています）。 javascriptのみを使用してビデオを一時停止し、現在のポップアップコードを実装する方法はありますか？ また、このコードでは、クリック可能なイメージ上にホバーオーバーレイを使用しています...物事をもっと複雑にするためです。

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"); 
} 

相続サイト：http://wellscreate.com/video/

Answer 1

あなたはYTのAPIを使用し、非常にイースリーことを行うことができます:)