☰

画像をクリックすると、埋め込まれた（iframe）YouTubeビデオが開始/再生されます。質問する

tag-icon • tag-icon jquery iframe youtube onclick embed
画像をクリックすると、埋め込まれた（iframe）YouTubeビデオが開始/再生されます。質問する

画像をクリックして、埋め込まれた YouTube ビデオの再生を開始しようとしています。ビデオの上に画像を配置し、画像をクリックするとフェードアウトしてビデオの再生を開始するというアイデアです。

私は jQuery を使用して画像をフェードアウトさせていますが、同様に jQuery を使用してビデオを再生またはクリックする方法を見つけたいと思っていました。

フェードは正常に機能していますが、ビデオの再生をトリガーする方法がわかりません。ビデオを自動再生して非表示に設定し、画像がクリックされたときにビデオをフェードインすることで、いくつかのブラウザーで機能するようになりました。ほとんどのブラウザーでは、フェードインするとビデオが自動再生されますが、Chrome では非表示のときでも自動再生が開始されました。iOS でもうまく機能しませんでした。

私はこの分野にかなり不慣れなので、100% 正しく書いているかどうかさえわかりませんが、次のようなことを試してみましたが、うまくいきませんでした。

     $('#IMAGE').click(function() { $('#VIDEO').play(); });

では、画像をクリックしたときにビデオを再生するにはどうすればいいでしょうか? jQuery だけを使用して、画像がクリックされたときにビデオを再生する方法はありますか?

よろしくお願いします。

ベストアンサー1

簡単で簡単な方法は、 jQuery を使用して設定されiframeたものと単純に交換することですautoplay=1。

HTML

プレースホルダー:

<div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

自動再生リンク:

<a class="introVid" href="#video">Watch the video</a></p>


JQueryの

onClick関数を呼び出すキャッチャー

jQuery('a.introVid').click(function(){
  autoPlayVideo('VIDEO_ID_HERE','450','283');
});

関数

/*--------------------------------
  Swap video with autoplay video
---------------------------------*/

function autoPlayVideo(vcode, width, height){
  "use strict";
  $("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}

おすすめ記事