使用.replaceWith（）的问题;与YouTube的iframe

我做了一个jQuery滑块，可以移动div来制作滑动效果。使用.replaceWith（）的问题;与YouTube的iframe

链接是这样的：

<ul id="navigation"> 
    <li class="element"><a href="#item1" class="panel , current" id="no"></a></li> 
    <li class="element"><a href="#item2" class="panel" id="no"></a></li> 
    <li class="element"><a href="#item3" class="panel" id="no"></a></li> 
    <li class="element"><a href="#item4" class="panel" id="yes"></a></li> 
    <li class="element"><a href="#item5" class="panel" id="no"></a></li> 
</ul>

我在＃DIV ITEM4 YouTube的iframe和当用户导航我使用卸下摆臂来停止播放音频（）;

例如。

$('ul#navigation li.element a#no').click(function() { 
    $('#video').remove(); 
});

这个工作正常。如果任何#no链接被点击div div幻灯片并且视频停止播放，视频加载并且可以播放。

我想添加视频回来的时候#yes链接是使用在点击：

$('ul#navigation li.element a#yes').click(function() { 
     $('#video').replaceWith('<iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen></iframe>'); 
    });

不工作，并从工作，以及停止卸下摆臂。我想这是因为所有的“那些在iframe中到处飞来飞去的。

我如何解决这个问题？

我尝试使用.show和.hide加的.css（”显示“‘无’），但声音继续播放。是否有比卸下摆臂和.replaceWith一个更好的方式来做到这一点？

感谢的人

编辑

我刚刚意识到，我可能会取消.remove，只需使用.replaceWith在单击#yes链接时插入iframe，但仍然存在语法问题。

问题可能是因为我试图用包含相同ID的html字符串替换#video吗？

编辑2 我找不出评论的降价。

我只是想：

$('#videobox').append('<iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen></iframe>');

其中#videobox是的iframe坐在被删除之前的div。这仍然打破.remove（）

来源

2011-11-17 Ampersand

您以前删除#video元素，所以你不能做$('#video').replaceWith(...)。 $('#video')找不到任何东西来操作.replaceWith()。

您将不得不使用.append()或其他jQuery DOM插入函数之一将新创建的iframe插入到正确的父对象中。

您可以使用Google的API控制来自JavaScript的iframe youtube视频。以下是一个例子：http://jsfiddle.net/jfriend00/D9Zjf/。

来源

2011-11-17 05:43:17 jfriend00

哇，你快！我刚刚通读我的文章，并意识到同样的事情。如果我只是交换.replaceWith与.append将这项工作？ – Ampersand

请参阅我的第二个编辑。 – Ampersand

Youtube有一个JavaScript API，因此您应该可以暂停或更改视频而不会完全破坏和重新创建所有内容。我自己并不熟悉这个API，但也许有些使用Google进行搜索会发现一些示例代码。 – jfriend00

使用.replaceWith（）的问题;与YouTube的iframe

回答

相关问题