从 div 中动态获取 iFrame 代码答案

【问题标题】：Grab iFrame Code dynamicly from a div从 div 中动态获取 iFrame 代码
【发布时间】：2014-07-12 23:45:23
【问题描述】：

我有一个具有唯一 ID 的 div，其中我有一个 youtube iframe 代码。我正在尝试开发一个粘性 div，当用户向下滚动以淡出包含 youtube iframe 视频的默认 div 并将其移动到这个新的粘性 div 并开始播放时。

到目前为止，我正在开发以下代码：

身体内部：

<div id="newdiv" style="display:none;"></div>
<div id="currentplayer">
    <iframe width="600" height="338" 
            src="//www.youtube.com/embed/avl5zgk3KH4?rel=0" frameborder="0" allowfullscreen>
    </iframe>
</div>

到目前为止，粘性 div 的代码是：

<script type="text/javascript">
$(function () {
    $(window).scroll(function () {
        var stickyHeaderTop = $('#currentplayer').offset().top;
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#currentplayer').hide();
            $('#newdiv').css({
                position: 'fixed',
                top: '35px',
                width: '310px'
            });
            $('#newdiv').fadeIn("fast");
        } else {
            $('#newdiv').fadeOut("fast");
            $('#currentplayer').show();
        }
    });
});
</script>

那么当用户向上滚动以将当前 iframe 移动到 id="newdiv" 的新 div 内并继续播放时，怎么可能呢？

谢谢

【问题讨论】：

标签： javascript php jquery

【解决方案1】：

使用 jQuery appendTo 应该可以解决问题...

$( "#currentdiv iframe" ).appendTo( $( "#newdiv" ) );

【讨论】：

一旦 iframe 从 dom 中拉出并重新插入，它将重新加载，不会保持状态

【解决方案2】：

您可以使用 jquery 命令.html 来获取和设置 div 的 html 内容。

但是，我认为将 iframe 复制到新 div 将意味着视频将从头开始播放。如果这是一个问题，那么您应该尝试通过更改 currentplayer css 来实现这一点。也许在 currentplayer 的外部有一个设置高度的 div，并使用它来检测用户在页面上的位置。

如果这不可行，请考虑使用 YouTube api，因为这样您就可以访问诸如视频播放量之类的数据，并告诉第二个视频区域从此时开始播放。

【讨论】：