Change iframe parent while playing embedded youtube video - html

Question

I want to change the parent of an iframe which is used for embedding a YouTube video.
When I change the parent:
Firefox and Chrome: Player stops playing and displays a new (stopped) player in new parent.
IE: Player continues playing and displays a new (stopped) player in second div. So user sees a stopped player but hears video.
Here is the sample fiddle: https://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);
}
It seems like iframe content is getting refreshed when parent changes.
Is it possible to video continues playing in new parent?
If not, Firefox and Chrome's behavior is OK, then how can I fix IE's behavior?

Answer 1

What I can think of is you use classes instead of ids in you HTML/CSS like this:
<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>
and
.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;
}
This way in your js script you simply need to state:
var div1 = $('.div1')
div1.removeClass('div1')
div1.addClass('div2')
this way your div will be positioned as the new div2 class says and move without stopping or refreshing.
HERE IS THE UPDATED FIDDLE
Hope this is what you were looking for.