web-dev-qa-db-ja.com

画像をクリックした後にYouTubeビデオを再生/開始する方法は？

画像があり、その画像をクリックした後にのみYouTubeビデオを開始したい。これどうやってするの？

どうもありがとう！

javascriptjqueryapiyoutubeclick
16
Grozav Alex Ioan

見て：

Youtube APIの例

コードは次のようになります。

function onPlayerReady(event) {
    $('img').click(function() { 
        ytPlayer.playVideo();
    });
}
8
Laurent Zuijdwijk

。click（） JQueryイベントハンドラ：

$("#clickMe").click(function(){
  $("#iframe")[0].src += "&autoplay=1";
  ev.preventDefault();
});
8
Shahadat

別のアプローチ-「？autoplay = 1」バージョンでiframe SRC（URL）を切り替えます。

<a href="#" id="clickMe">PLAY</a>

<iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" 
            data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe>

jQuery：

jQuery("#clickMe").on('click',function(){
    var vi = jQuery("#iframe");
    vi.attr("src", vi.data("autoplay-src") );
});
6
Marek

これが役立つと思います。私にとってはうまくいきます。

$('.trigger').on('click', function () {
    $(".video")[0].src += "1";
});
<a href="#" class="trigger">Click</a>
        
<iframe class="video" src="https://www.youtube.com/embed/HJX71gFz_do?autoplay=" frameborder="0" allowfullscreen></iframe>
1
Ajithkumar S

autoplay = 1の追加は、初めて機能するようです。開始/停止ボタンを使用していて、最初にクリックしたときにautoplay = 1を追加します。次に、もう一度クリックすると、autoplay = 1が削除されます。それはうまくいきます。

しかし、それをもう一度開始しようとすると（autoplay = 1を追加）、開始されません。

0
Emil Diego