在播放嵌入式YouTube視頻時更改iframe父級

我想更改用於嵌入YouTube視頻的iframe的父級。在播放嵌入式YouTube視頻時更改iframe父級

當我更改父：

Firefox和Chrome：Player停止播放並顯示在新的母公司新（停止）播放器。
IE：播放器繼續播放，並在第二格顯示新的（停止）播放器。所以用戶看到一個停止的播放器，但聽到視頻。

下面是示例小提琴：http://jsfiddle.net/mehmetatas/znuUf/1/

try { 
     var div1 = $('#div1') 
     var video = div1.find('.video')[0]; 
     var div2 = $('<div id="div2"></div>'); 
     $(video).appendTo(div2); 
     div2.appendTo($('.parent')); 
     div1.remove(); 
    } 
    catch (e) { 
     alert(e.message); 
    }

好像iframe中的內容越來越刷新時父變化。

視頻是否可以繼續播放新的父視頻？

如果沒有，Firefox和Chrome的行爲是OK的，那麼我該如何解決IE的行爲？

來源

2013-05-19 Mehmet Ataş

我能想到的是你在你HTML/CSS使用classes代替ids這樣的：

<input id="btn" type="button" value="move"></input> 
<div class="parent"> 
    <div class="div1"> 
     <div class="video"> 
      <iframe width="300" height="200" src="http://www.youtube.com/embed/98LHnO0xiMY" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div>

和

.div1 { 
    position: absolute; 
    top: 50px; 
    width: 300px; 
    height: 200px; 
    border: solid 3px green; 
} 

.div2 { 
    position: absolute; 
    top: 50px; 
    left: 325px; 
    width: 300px; 
    height: 200px; 
    border: solid 3px red; 
}

這樣在你js script你只需狀態：

var div1 = $('.div1') 
div1.removeClass('div1') 
div1.addClass('div2')

這樣你的div將被定位爲新的div2課堂並不停頓或清爽地移動。

HERE IS THE UPDATED FIDDLE

希望這是你所期待的。

來源

2013-05-19 14:42:43 Onheiron

感謝您的回答。我的小提琴顯示了我的問題的簡化版本。我實際上想要做的是讓用戶將網站的整體佈局從3列視圖更改爲2列視圖。爲了做到這一點，我創建了新的列div，將子對象添加到新的列div中並刪除舊的div div。 –

在播放嵌入式YouTube視頻時更改iframe父級

回答

相關問題