4

私はjs/jqueryにかなり慣れていないので、知識のある人の助けが必要です!

私はこのサイトとウェブをよく見ましたが、自分で答えを見つけることができません. 私は自分自身で遊んでいましたが、限られた知識では次に何をすべきかわかりません.

私が持っているもの

クリックすると、プレースホルダー/ポスターのように (YouTube ビデオ) にimg置き換えられます。これは、最初にここで見つけた以下のコードで完全に機能します: YouTube ビデオにスプラッシュ画面/プレースホルダー画像を追加する方法:iframe

<div class="playbutton"></div>    
<img src="image.jpg" data-video="http://www.youtube.com/videolink">
        <script>
                $('img').click(function(){
            var video = '<div class="video-container"><iframe src="'+ $(this).attr('data-video') +'"></iframe></div>';
            $(this).replaceWith(video);
        });
        </script>

私が言ったように、画像をクリックすると完全に機能し、ビデオに置き換えられます。

問題

の上に浮かぶ再生ボタン (現在はdivですが、代わりに使用できます) を追加しました。再生ボタンをクリックしても何も起こりません (スクリプトとは関係がないことは明らかです)。imgimg

この再生ボタンで を に置き換えることを「トリガー」したいのですimgがiframe、これを実現するためにスクリプトに何を追加すればよいかわかりません。

私が探しているもの

再生ボタンがクリックされたときに「トリガー」になるか、理想的には再生ボタンと「トリガー」の両方imgを使用して、ユーザーが再生ボタンだけでなく画像をクリックしても機能することを探しています。

私はあなたを持っている間...

ミックスに閉じるボタンを追加してクリックした場合、iframeをに置き換えることもできますか?img

どんな助けでも大歓迎です！

デール

4

2 に答える 2

5

これは、閉じるボタンを含め、必要なすべてのことを行います: ここに作業フィドルがあります: http://jsfiddle.net/ANRHT/6/

js:

 $('.playbutton,img').click(function(){
   var video = '<div class="video-container"><iframe src="'+$('img').attr('data-video') +'"></iframe></div>';
   $('.video').hide();
   $('.tube').html(video);
   $('.close').show();
 });
 $('.close').click(function(){
   $('.video').show();
   $('.tube').empty();
   $('.close').hide();
 });

HTML:

<div class="video">
  <div class="playbutton">Play</div>    
  <img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
于 2013-05-04T21:04:29.387 に答える