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

Youtube video still playing when overlay is closed

本文关键字：视频 播放 Youtube 覆盖      更新时间：2023-09-26

我有一个嵌入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>

Try

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

关闭叠加后

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

相关文章：