使用.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

回答

相關問題