使用 jquery 在 dom 中移动嵌入式 youtube iframe 会导致全屏无法在 Windows 8 IE 10 中运行答案

【问题标题】：Moving embedded youtube iframe in dom with jquery causes fullscreen to not work in Windows8 IE10使用 jquery 在 dom 中移动嵌入式 youtube iframe 会导致全屏无法在 Windows 8 IE 10 中运行
【发布时间】：2013-08-29 11:46:34
【问题描述】：

我正在尝试移动一个 div 的内容并将其附加到另一个 div。我要移动的 div 包括一个嵌入式 youtube iframe。当我在移动 div 后尝试单击全屏按钮时，视频会重置，而不是继续全屏播放。如果我将 iframe 本身移动到另一个位置，也会发生同样的问题。

这是一个例子：

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

移动嵌入的 iframe 后，在 Windows 8 IE10 中，我无法全屏查看视频。

重新加载 iframe 似乎也没有修复错误：

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

【问题讨论】：

你能在 jsfiddle 中复制这个问题，以便人们自己尝试吗？

标签： javascript jquery html iframe youtube

【解决方案1】：

你可以使用这个方法。

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

干杯！

【讨论】：

【解决方案2】：

如果克隆 iframe 会怎样？

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

【讨论】：