Question

我想更改用于嵌入YouTube视频的iframe的父级。

当我更改父母时：

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

我能想到的是你在html / css中使用classes代替ids：

<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

希望这就是你要找的东西。

播放嵌入式YouTube视频时更改iframe父级

1 个答案: