iframe onclick animate或toggle

Question

我必须实现一个设计,其中div占视频的15-20%iframe(youtube视频,vimeo等).当用户点击视频并开始播放视频时,div应向下滑动(animate marginTop: 0).然后,当用户再次点击视频以停止它时,div应该出现(marginTop: -100px).

这是我用来捕获点击事件的脚本,iframe并为div设置动画以向下滑动.

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    }, function() {
        overiFrame = -1
    });
    jQuery(window).blur( function() {
        if( overiFrame != -1 )
            jQuery('.header-container').animate({
                marginTop: '0'
            })
    });
});    

我不知道如何捕获第二次单击iframe并将div向上滑动.我试过toggleClass但是在脚本添加类之后它不会删除它.

稍后编辑

我对脚本做了一些修改,但它仍然无法正常工作.它仅在用户在iframe上单击一次,在iframe外单击一次时才有效,依此类推.如果用户在iframe中多次单击,则动画不起作用.

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    }, function() {
        overiFrame = -1
    });

    jQuery(window).blur( function() {
        if( overiFrame != -1 ) {
            if (jQuery('.header-container').hasClass('animate')) {
                jQuery('.header-container').removeClass('animate')
        }   else {
                jQuery('.header-container').addClass('animate')
            } 
        }

    });
});    

这是我试图实现的设计的屏幕截图:

Answer 1

您无法完全意识到您想要什么，因为无法从跨域 iframe 监听单击事件，但我有一个想法如何部分地做到这一点。

这只是示例，如果您喜欢这个想法，则需要定制我的解决方案。

提示是 - 使用叠加层来获取点击，隐藏叠加层以让用户点击视频，再次显示叠加层以获取其他点击。当然，工具提示也可以从点击和动画中切换，您需要自己设置。

坏消息 - 所有视频点击都需要双击

html

<iframe id="iframe" src="http://www.youtube.com/embed/xFa2_PVMeDQ?rel=0" allowfullscreen="" frameborder="0"></iframe>
<div id="tooltip">tooltip</div>
<div id="overlay"></div>

CSS

#iframe {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#tooltip {
    position: absolute;
    top: 200px;
    width: 100px;
    height: 50px;
    background: white;
    z-index: 3;
    text-align: center;
    line-height: 2em;
}
#overlay {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

jQuery

$("#overlay").click(function () {
    $(this).hide();
$('#tooltip').toggle(
 function(){
     $('#another-element').show();
}
,
function(){
    $('#another-element').hide();
}
);
    setTimeout(function () {
        $("#overlay").show();
    }, 500);
});

小提琴