javascript - 在点击时播放iframe视频(带有弹出窗口)，并在弹出窗口关闭时暂停

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

您可以使用YOUTUBE API并轻松完成:)