在iframe中播放YouTube视频时对escape key事件应用jquery

我将YouTube视频嵌入到一个div中，点击一个按钮就可以看到它。现在我想隐藏escape按键事件上的div

Html

---

这是一种非常非正统的方法，可以实现你想要实现的目标

我建议您将youtube视频的动态变量放入expando属性中

Html

至于隐藏视频，您需要以文档为目标，并键入“27”进行转义

Jquery

$（“.divpop”）。单击（函数（）{
//创建新的iframe实体：
var$yt_embed=$（''）；//变量指示jquery对象之前的美元
//实例化和分配属性
var yt_url=”https://www.youtube.com/embed/“+$（this.attr（'youtube_vid'）；
$yt_embed.attr（'src'，yt_url）
.attr（'width'，$（this.attr（'youtube\u width'））
.attr（'height'，$（this.attr（'youtube_height'））；
$（“#弹出视频”）.html（$yt#u嵌入）；
});
$（文档）.keyup（函数（e）{
如果（e.keyCode==27）{$（'#popup_video'）.empty（）；}//esc
});

这是小提琴：

---

这是一个老问题，但我遇到了同样的问题

以下是我的解决方案：

正如Zmart所说，您动态填充视频的方法有点奇怪，我将执行以下操作：

<div class="divpop" yt_width="640" yt_height="480" yt_vid="5uGo0L4ribY">
    <img class="project-img project-img-visible" src="images/videos/img1.jpg" alt="">
</div>

当弹出窗口加载时绑定此文件，当其关闭时解除绑定。或者，如果你的页面上没有其他需要关注的项目，就一直放在那里

$(".divpop").click(function(){
    $(window).on("blur.videopopup", function(){
        setTimeout(function(){
            $(window).focus();
        },500);
    });
    $(window).on("keyup.videopopup", function(e) {
        if (e.keyCode === 27) { $('#popup_video').empty(); $(window).off('.videopopup'); }   // esc
    });
    $("#popup_video").html('<iframe width="'+$(this).attr('yt_width')+'" height="'+$(this).attr('yt_width')+" src="https://www.youtube.com/embed/'+$(this).attr('yt_vid')+'" frameborder="0" allowfullscreen></iframe>');
});

$（“.divpop”）。单击（函数（）{
$（窗口）.on（“blur.videopopup”，函数（）{
setTimeout（函数（）{
$（window.focus（）；
},500);
});
$（窗口）.on（“keyup.videopopup”，函数（e）{
如果（e.keyCode==27）{$（'.#popup_video'）.empty（）；$（window）.off（'.videopopup'）；}//esc
});
$（“#弹出视频”）.html（“”）；
});

这不是ID属性的用途。Zmart完全同意您的方法。但解决方案仍然不起作用。escape键仅在未播放视频时起作用，单击iframe后即起作用。播放视频后，它捕获所有控件，escape键不起作用。也许添加一些东西会将焦点带回文档，Trishul？这里也有同样的问题。我正在尝试使用捕鼠器绑定到keyevents，但到目前为止还没有成功，即使使用我自己的事件侦听器也是如此。

<div class="divpop" youtube_width="640" youtube_height="480" youtube_vid="5uGo0L4ribY">
    <img class="project-img project-img-visible" src="images/videos/img1.jpg" alt="">
</div>

$(".divpop").click(function(){
    // Create new iframe entity:
    var $yt_embed = $('<iframe/>'); //dollar before variable indicates jquery object
    // Instantiate and assign attributes
    var yt_url = "https://www.youtube.com/embed/"+$(this).attr('youtube_vid');
    $yt_embed.attr( 'src', yt_url )
             .attr( 'width', $(this).attr('youtube_width') )
             .attr( 'height', $(this).attr('youtube_height') );
    $("#popup_video").html($yt_embed);
});


$(document).keyup(function(e) {
    if (e.keyCode == 27) { $('#popup_video').empty(); }   // esc
});

<div class="divpop" yt_width="640" yt_height="480" yt_vid="5uGo0L4ribY">
    <img class="project-img project-img-visible" src="images/videos/img1.jpg" alt="">
</div>

$(".divpop").click(function(){
    $(window).on("blur.videopopup", function(){
        setTimeout(function(){
            $(window).focus();
        },500);
    });
    $(window).on("keyup.videopopup", function(e) {
        if (e.keyCode === 27) { $('#popup_video').empty(); $(window).off('.videopopup'); }   // esc
    });
    $("#popup_video").html('<iframe width="'+$(this).attr('yt_width')+'" height="'+$(this).attr('yt_width')+" src="https://www.youtube.com/embed/'+$(this).attr('yt_vid')+'" frameborder="0" allowfullscreen></iframe>');
});