Question

我有一个叠加的嵌入式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>

Answer 1

尝试

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

关闭叠加后

或仅$('#box iframe').remove();

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

1 个答案: