jquery - 在 iframe 中播放 youtube 视频时在转义键事件上应用 jquery

Question

我在一个 div 中嵌入了一个你的管视频，并通过单击一个按钮来实现它。现在我想在转义按键事件中隐藏 div。

网页

<div 
class="divpop" 
id='<iframe width="640" height="480" src="https://www.youtube.com/embed/5uGo0L4ribY" frameborder="0" allowfullscreen></iframe>'><img class="project-img project-img-visible" src="images/videos/img1.jpg" alt=""'>
</div>

jQuery

$(".divpop").click(function(){
       $("#popup_video").html((this).id);
      });
$(#popup_video).keypress(function(e){
     if (e.which==0){
       $("#popup_video").empty();
     } });

Answer 1

这是一种非常非正统的方式来做你想要实现的事情。

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

网页

<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>

至于隐藏视频，你需要定位文档，keycode '27' for Escape

jQuery

$(".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
});

这是 fiddle :
http://jsfiddle.net/yAvBh/2/