关闭覆盖时 Youtube 视频仍在播放答案

【问题标题】：Youtube video still playing when overlay is closed关闭覆盖时 Youtube 视频仍在播放
【发布时间】：2013-05-29 14:55:35
【问题描述】：

我有一个嵌入的 youtube 视频的叠加层，该视频会在页面加载时打开，考虑到这是我第一次做这样的事情，这一切都非常好。但是，只要在播放视频时关闭叠加层，就可以听到视频在后台播放，我不知道如何解决这个问题。我完全不知所措，由于我在编码方面缺乏经验，我不知道如何处理通过谷歌找到的解决方案。如果有人可以帮助我，我将不胜感激！

以下是叠加层的代码，请随时评论我可以对其进行的任何改进以及我的问题的可能解决方案。

<html>
<head>
  <title>Test Overlay</title>
  <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>  
   <style>
    #box {
    display:none;
    width:880px;
    border:10px solid #666;
    border:10px solid rgba(82, 82, 82, 0.698);
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
  }
  #box div {
    padding:10px;
    border:1px solid #3B5998;
    background-color:#fff;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif
  }
  #box h2 {
    margin:-11px;
    margin-bottom:0px;
    color:#fff;
    background-color:#6D84B4;
    padding:5px 10px;
    border:1px solid #3B5998;
    font-size:20px;
  }
  </style>
$(‘#videofeed’).appendTo(‘body’);
<!--[if IE]>
<style type="text/css">
  .box {
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333    );
  zoom: 1;
  }
</style>
<![endif]-->
</head>
<body>
<!-- dialog -->
<div id="box">
  <div>
    <h2>Welcome!</h2>
    <table width="620" border="0" cellpadding ="0" cellspacing = "0" style="margin-left:auto; margin-right:auto;">
  <tr>    
  </tr>
  <tr>
    <td height="480"><iframe width="854" height="480" src="http://www.youtube.com/embed/ej08Oju4tu8" frameborder="0" allowfullscreen></iframe></td>
  </tr>
  </table>      
  </div>
</div>
<script>
$(document).ready(function() {
  $("#open_now").click(function() {
      $("#box").overlay().load();
  });
  $("#box").overlay({
    top: 260,   
    mask: {
    color: '#fff',
    loadSpeed: 200,
    opacity: 0.5
    },
    closeOnClick: true,
    load: true
    });
    });
</script>
</body>
</html>

【问题讨论】：

这是一个错字吗： $('#videofeed').appendTo('body'); ?
也许这会对你有所帮助； stackoverflow.com/questions/2879227/html5-video-stop-onclose希望有帮助。

标签： javascript jquery html youtube overlay

【解决方案1】：

试试

$('#box').remove();

关闭叠加层后

或者只是$('#box iframe').remove();

【讨论】：

感谢您的快速回复！我将把它放在代码中的什么位置？我整天都在努力解决这个问题，所以我的大脑有点炸了......
只需将onClose: function() { /* the code */ } 添加到您的overlay()
注意： $().remove() 从 DOM 中删除元素。如果您希望稍后显示视频，则需要将其重新添加到 DOM。如果这没问题，那么就可以了。
很抱歉回复延迟，我无法访问互联网。住在乡下的快乐。每次我添加 onClose: function() 时，它都会以编程方式阻止覆盖加载。这有什么原因吗？有没有办法解决这个问题？
您确定将其添加到覆盖函数中吗？如果您使用 Firefox，请尝试使用 Strg+Shift+K 来显示控制台。是否显示任何错误？