Jquery UI选项卡重置内容

我在jQueryUI中设置了三个选项卡，每个选项卡都包含一个Youtube嵌入

一切正常，除了每当我在一个选项卡中启动一个视频并想切换到另一个选项卡时，前面的视频不会自动停止

换句话说，当用户导航到下一个选项卡时，我需要JQUI停止播放所有以前的选项卡内容，否则会出现重叠（本例中为声音）

这可能吗？感谢您的帮助

html结构如下所示：

<div class="tabs">
    <div class="tabs-navi">
        <ul>
            <li><a href="spip.php?article1">Commercial</a></li>
            <li><a href="spip.php?article5">Fiction</a></li>
            <li><a href="spip.php?article4">Experimental</a></li>
        </ul>
    </div><!--.tabs-navi-->
</div><!--#tabs-->

您可以查看一下使用popcorn.js并使用YouTube播放器来显示视频，然后只需连接到选项卡控件的select事件，然后在相关的popcorn播放器上调用pause即可。

到目前为止我看到的问题：

因为页面当前的工作方式是显示视频和隐藏 另外，最好将它们从DOM树中删除或隐藏

几个div元素使用相同的id属性值，每个id 在同一页上应该是唯一的

使用的iframe视频嵌入代码存在一些问题 Internet Explorer，整个页面有时会变黑。。。 如果你关心的话，Firefox和Chrome没有这个问题 与IE兼容，最好还是坚持旧的 对象嵌入方法

---

嵌入看起来像什么？嗨，Jon，这个网站是：（视频和音乐部分是我的Q中涉及的部分）我用html结构更新了Q。每个href实际上都是一篇文章，其中包含一个iframe，如下所示：