Question

在我的代码中，当用户点击按钮时，youtube视频会出现在弹出窗口中。

我希望只有当有人点击按钮并弹出窗口时才会加载视频，并且当有人关闭该框时，它会停止播放。

目前，我的代码只是隐藏了显示，仅此而已。

HTML：

<button id="watchbutton">Watch Trailer &#9658</button>


<div id="close">
<div id="trailerdivbox" >
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" 
 src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" 
 allowfullscreen></iframe>
 </div>
 </div>
 </div>

CSS：

/* Watch Trailer Button CSS */
#watchbutton {
background-color:#f2f2f2;
color:red;
font-weight:600;
border: none; /* This one removes the border of button */
padding: 10px 12px;

}

#watchbutton:hover {
background-color:#e2e2e2;
cursor:pointer;
}

 #trailerdivbox {
display:none;
width: 100%;
height:100%;
position:fixed;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */


}

 .videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
 }
.videoWrapper iframe {
position: absolute;
max-width:560px;
max-height:315px;
width: 95%;
height: 95%;
left:0;
right:0;
margin:auto;
}

Javascript：

// Get the modal
var modal = document.getElementById('trailerdivbox');

// Get the button that opens the modal
var btn = document.getElementById("watchbutton");

 // When the user clicks the button, open the modal 
 btn.onclick = function() {
  modal.style.display = "block";
 }

 var trailerbox = document.getElementById("close");

 trailerbox.onclick = function() {
 modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
   }
 }

Answer 1

将?autoplay=1添加到您的iframe src。

并重置 src以停止播放视频。

要仅在按钮点击时加载iframe来源，而不是在文档加载时加载它，您应该在src函数上设置playVideo()属性。

为此，您可以向iframe（data-src）添加新属性，该属性将存储视频网址，然后在需要时访问它的值。

＆＃13;

// Get the modal
var modal = document.getElementById('trailerdivbox');

// Get the button that opens the modal
var btn = document.getElementById("watchbutton");

function playVideo() {
  var video = document.getElementById('video');
  var src = video.dataset.src;

  video.src = src + '?autoplay=1';
}

function resetVideo() {
  var video = document.getElementById('video');
  var src = video.src.replace('?autoplay=1', '');

  video.src = '';
  video.src = src;
}

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  playVideo();
}

var trailerbox = document.getElementById("close");

trailerbox.onclick = function() {
  modal.style.display = "none";
  resetVideo();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    resetVideo();
  }
}

＆＃13;

/* Watch Trailer Button CSS */

#watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  /* This one removes the border of button */
  padding: 10px 12px;
}

#watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

#trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

＆＃13;

<button id="watchbutton">Watch Trailer &#9658</button>


<div id="close">
  <div id="trailerdivbox">
    <div class="videoWrapper">
      <iframe id="video" class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

＆＃13;

如果您无法在上面的代码段中播放视频，请参阅fiddle。

Answer 2

Check youtube的API文档API

player.stopVideo()

所以在Jquery

$('#ID').get(0).stopVideo();

试试这个

Answer 3

<a id="stop" href="#">Stop</a>

<iframe id="popup-youtube-player" width="640" height="360" src="http://www.youtube.com/embed/geTgZcHrXTc?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>


$('#stop').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
$('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    });

如何在框出现时才能使youtube嵌入视频加载

3 个答案: