Question

我有一张图片，点击后会切换一个带有iframe / youtube视频的弹出窗口。必须再次单击该视频才能播放。当您单击弹出窗口（使视频消失）时，视频仍然播放（您可以听到音频，但视频已消失）。有没有办法只使用javascript暂停视频并实现我当前的弹出代码？此代码也使用可点击图像上的悬停覆盖...只是为了使事情变得更复杂。

HTML：

basic-tpu

CSS

<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>

的JavaScript

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

继承了网站：http://wellscreate.com/video/

Answer 1

您可以使用YT API并轻松完成：）

播放iframe视频onclick（带弹出窗口）并在弹出窗口关闭时暂停

1 个答案: