Изменение родителя iframe при воспроизведении встроенного видео youtube

Question

Я хочу изменить родительский элемент iframe, который используется для встраивания видео YouTube.

Когда я меняю родитель:

• Firefox и Chrome: Игрок перестает играть и отображает новый (остановлено) игрок в новых родителях.
• IE: Игрок продолжает воспроизведение и отображает нового (остановленного) игрока во втором div. Таким образом, пользователь видит остановленного игрока, но слышит видео.

Вот пример скрипку: 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 в порядке, то как я могу исправить поведение IE?

Answer 1

То, что я могу вспомнить, использовать classes вместо ids в вас HTML/CSS, как это:

<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

Надежда это то, что вы искали.