Moving embedded youtube iframe in dom with jquery causes fullscreen to not work in Windows8 IE10

Question

I am trying to move the contents of one div and append it to another div. The div that I am moving includes a embedded youtube iframe. When I try clicking on the full screen button after the div has been moved, the video resets instead of continuing playback in full screen. The same issue happens if I move the iframe itself to another location.

Here's an example:

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

After moving the embedded iframes, in Windows 8 IE10, I can't view the video in full screen.

Reloading the iframe also doesn't seem to be fixing the bug:

$('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();
});

Cheers!