video

video

关注
发信
关注(28)粉丝(399)

只有当框出现时，如何使youtube嵌入的视频加载

本文介绍了只有当框出现时，如何使youtube嵌入的视频加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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





只有当有人点击按钮并弹出窗口出现时，我才想加载视频，当有人关闭盒子时，它会停止播放。



目前，我的代码只是隐藏显示器，没有其他更多。

HTML：

 < button id =watchbutton>观看预告片&＃9658< / button> 
 
 
< div id =close> 
< div id =trailerdivbox> 
< div class =videoWrapper> 
  src =https://www.youtube.com/embed/TDwJDRbSYbwframeborder =0
 allowfullscreen>< / iframe> 
< / div> 
< / div> 
< / div>

CSS： 

  / *观看预告片按钮CSS * / 
 #watchbutton {
 background-color：＃f2f2f2; 
颜色：红色; 
 font-weight：600; 
 border：none; / *这一个删除按钮的边界* / 
 padding：10px 12px; 
 
} 
 
 #watchbutton：hover {
 background-color：＃e2e2e2; 
光标：指针; 
} 
 
 #trailerdivbox {
 display：none; 
宽度：100％; 
身高：100％; 
位置：固定; 
溢出：auto; / *启用滚动* / 
 background-color：rgb（0,0,0）; / *备用颜色* / 
 background-color：rgba（0,0,0,0.4）; / *黑色不透明* / 
 
 
} 
 
。视频包装器{
位置：相对; 
填充底部：56.25％; / * 16：9 * / 
 padding-top：25px; 
 height：0; 
} 
 .videoWrapper iframe {
 position：absolute; 
最大宽度：560px; 
最大高度：315px; 
宽度：95％; 
身高：95％; 
剩下：0; 
 right：0; 
 margin：auto;

Javascript： 

  //获取模态
 var modal = document.getElementById（'trailerdivbox'）; 
 
 //获取打开模式
的按钮var btn = document.getElementById（watchbutton）; 
 
 //当用户点击按钮时，打开模式
 btn.onclick = function（）{
 modal.style.display =block; 
} 
 
 var trailerbox = document.getElementById（close）; 
 
 trailerbox.onclick = function（）{
 modal.style.display =none; 
} 
 
 //当用户点击模式外的任何地方时，关闭它
 window.onclick = function（event）{
 if（event.target = = modal）{
 modal.style.display =none; 
} 
}


解决方案

Add ？autoplay = 1 到您的iframe src 。



src 停止播放视频。



$ c> iframe 仅在按钮单击时才提供源代码，而不是在文档加载时加载，您应该在 src 属性> playVideo（）函数。



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



//获取modalvar modal = document.getElementById（'trailerdivbox'）; //获取按钮打开modalvar btn = document.getElementById（watchbutton）;好玩ction 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;} //当用户点击按钮时，打开模式btn.onclick = function（）{modal.style.display =block; playVideo（）;} var trailerbox = document.getElementById（close）; trailerbox.onclick = function（）{modal.style.display =none; resetVideo（）;} //当用户点击模态外的任何地方时，关闭itwindow.onclick = function（event）{if（event.target == modal）{modal.style.display =none; resetVideo（）; }} 
  / *观看预告片按钮CSS * /＃watchbutton {background-color：＃f2f2f2;红色; font-weight：600; border：none; / *这一个删除按钮的边界* / padding：10px 12px;}＃watchbutton：hover {background-color：＃e2e2e2; cursor：pointer;}＃trailerdivbox {display：none;宽度：100％;身高：100％;位置：固定;溢出：自动; / *启用滚动* / background-color：rgb（0，0，0）; / *回退颜色* / background-color：rgba（0，0，0，0.4）; / *黑色不透明* /}。videoWrapper {position：relative;填充底部：56.25％; / * 16：9 * / padding-top：25px; height：0;}。videoWrapper iframe {position：absolute; max-width：560px; max-height：315px;宽度：95％;身高：95％;左：0;正确：0; margin：auto;}  
 < button id =watchbutton >观看预告&＃9658< / button>< div id =close> < div id =trailerdivbox> < div class =videoWrapper> < iframe id =videoclass =trailervideowidth =560height =315src =https://www.youtube.com/embed/TDwJDRbSYbwframeborder =0allowfullscreen>< /的iframe> < / DIV> < / div>< / div>

a href =https://jsfiddle.net/kz0xxe22/3/ =nofollow noreferrer>小提琴如果您无法播放上述片段中的视频。


In my code, youtube video appears in a pop-up window, when users click on a button.

This is my fiddle

I want the video to load only when someone click on the button and pop-up window appears, and it to stop playing, when someone close the box.

Currently,my code just hide the display, nothing more than that.

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";
   }
 }
解决方案

Add ?autoplay=1 to your iframe src.

And reset the src to stop the video.

To load the iframe source only on button click, instead of loading it on document load, you should set the src attribute on playVideo() function.

For that, you can add a new attribute to your iframe (data-src), which will store the video URL, and then, access it's value when needed.

// 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();
  }
}
/* 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;
}
<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>

See the fiddle if you can't play the video in the snippet above.

这篇关于只有当框出现时，如何使youtube嵌入的视频加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-26 18:36
Powered by LMLPHP ©2024 video 0.006208