Question

我有一个具有唯一ID的div，在此我有一个youtube iframe代码。我正在尝试开发一个粘性div，当用户向下滚动淡出默认div时，它会保存youtube iframed视频并将其移动到这个新的粘性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>

那么当用户向上滚动以在id =＆＃34; newdiv＆＃34;的新div中移动当前iframe时，怎么可能呢？并恢复播放？

由于

Answer 1

使用jQuery appendTo可以做到这一点......

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

Answer 2

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

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

如果无法做到这一点，那么请考虑使用YouTube API，因为您可以访问视频播放了多少数据，并告诉第二个视频区域从这一点开始播放。

从div动态获取iFrame代码

2 个答案: