1

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

当我改变父母时：

  • Firefox 和 Chrome：播放器停止播放并在新父级中显示一个新的（停止的）播放器。
  • IE：播放器继续播放并在第二个 div 中显示一个新的（停止的）播放器。所以用户看到一个停止的播放器但听到了视频。

这是示例小提琴：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);
    }

当父级更改时，似乎 iframe 内容正在刷新。

视频是否可以在新父母中继续播放？

如果不是，Firefox 和 Chrome 的行为还可以，那么我该如何修复 IE 的行为？

4

1 回答 1

0

我能想到的是你使用classes而不是ids你的 HTML/CSS 像这样：

<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 类的说明定位并移动而不会停止或刷新。

这是更新的小提琴

希望这就是你要找的。

于 2013-05-19T14:42:43.967 回答