jquery - Jquery画像をクリック

Question

画像を持つ div があります。画像をクリックすると、その画像が埋め込まれたビデオを再生するように変換するのが好きです。

<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe>

どんな助けでも大歓迎です。できればページを更新したくありません。

Answer 1

編集: ここで使用する Fiddle です: http://jsfiddle.net/9pdX6/

ビデオIDをどこから取得しているかによって異なります。

あなたがこれを持っているとしましょう：

<img data-id="DxkEe_l7S3g" src="some_image" />

次に、次のように探しているものを達成できます。

$('img').click(function() {
    $(this).replaceWith(
        '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + 
        $(this).data('id') + '" frameborder="0" allowfullscreen></iframe>'
    );
});

Answer 2

イメージで言いましょう

<img src="..." data-src="http://www.youtube.com/embed/DxkEe_l7S3g"/>

jQueryで

$(document).on("click","img",function(){
    var frame = '<iframe width="560" height="315" src="'+$(this).data("src")+'" frameborder="0" allowfullscreen></iframe>';
    $(this).replaceWith(frame);
});