1

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

html

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

2 回答 2

0

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

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

html

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

这是小提琴：http: //jsfiddle.net/yAvBh/2/

于 2013-08-24T08:02:40.383 回答
0

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

这是我的解决方案：

正如 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>');
});
于 2015-01-09T22:09:52.820 回答