iframe onclick 动画或切换答案

【问题标题】：iframe onclick animate or toggleiframe onclick 动画或切换
【发布时间】：2014-06-01 20:04:54
【问题描述】：

我必须实现一个设计，其中 div 覆盖视频iframe（youtube 视频、vimeo 等）的 15-20%。当用户点击视频并且视频开始播放时，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')
            } 
        }

    });
});

这是我正在尝试实现的设计的屏幕截图：

【问题讨论】：

你能和我们分享你的 HTML 吗？
你对这部分有什么期望：jQuery('iframe').hover(function() { overiFrame = jQuery(this).closest('.video-container'); }, function( ) { overiFrame = -1 }); ?
naota，这是网址：george.grigorita.me/zune/this-is-a-video-post。 enguerranws，该部分用于捕获 iframe 上的第一次点击。

标签： javascript jquery iframe onclick

【解决方案1】：

您无法完全意识到自己想要什么，因为无法从跨域 iframe 中侦听 click 事件，但我知道如何部分做到这一点。

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

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

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

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);
});

fiddle

【讨论】：

【解决方案2】：

跨域 iframe 无法捕获点击事件。实际上，这不是完全正确的解决方案，例如对于 youtube，还有一些其他控件（例如更改视频质量的按钮、在 YouTube 网站上观看、更改位置的进度条等）。每次点击都会导致您的叠加层出现/消失。

如果您的视频提供商数量有限 - 我建议您使用这些提供商的适当 API。

例如对于 youtube 视频，有 JS API 来控制视频。您也可以 subscribe to an appropriate event 并定义您的行为。
对于 vimeo - the same。

【讨论】：