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>

Jクエリ

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

ビデオを非表示にするには、ドキュメントをターゲットにする必要があり、エスケープのキーコードは「27」です

Jクエリ

$(".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 に答える