Moving a built-in youtube iframe to dom using jquery makes fullscreen not work in Windows8 IE10

Question

I am trying to move the contents of one div and add it to another div. The div I'm moving includes a built-in iframe iframe. When I try to press the full screen button after the div has been moved, the video is reset instead of continuing to play in full screen. The same problem occurs if I move the iframe itself to another location.

Here is an example:

$(iframes).each(function() { $('.tab_content').append($(this)); }); 

After moving the embedded frames in Windows 8 IE10, I can’t watch the video in full screen.

Rebooting the iframe also does not seem to fix the error:

 $('iframe').each(function() { var src = $(this).attr('src'); $(this).attr('src', ''); $(this).attr('src', src); }); 

Answer 1

you can use this method.

 $('iframe').each(function() { $('.tab_content').append($(this).prop('outerHTML')); $(this).remove(); }); 

Hooray!

Answer 2

What if you clone an iframe?

 $(iframes).each(function() { $('.tab_content').append($(this).clone()); });