APIを使ってサムネイル画像をクリックで再生する方法です。コードは以下のようになります。コピペで使ってもらって構いません。});});デモはこちらYoutube側でも動画のサムネイルはカスタマイズできますが、Webサイト埋め込みではまた違うのを使いたかったりします。開発者側(ディベロッパー)ではYoutube動画自体のサムネイルを変えることが不可能の方が多いです。そこで自前のサムネイル画像を用意し、それをクリックすると埋め込み動画が再生されるようにします。いくつかやり方はあると思うのですが、自分は次のような方法でやります。APIを利用するためのスクリプトを呼び出します。class="player"></div></div><img>タグにdata属性を追加して、この中にYoutubeの動画IDを入れておきます。class="player"の<div>はYoutubeの動画を埋め込む枠になります。2;}動画用の枠とサムネイルをpositionで配置しています。true;}スマホかの判定をしています。スマホは自動再生に制限がある(後述)ので、挙動を切り分けています。event.target.playVideo();}Youtubeのプレイヤーが読み込まれたら実行する関数です。iOSの場合はmute関数を追加して音声をオフにした上で、動画を再生します。$(this).hide();});サムネイルをクリックしたら実行する関数です。video_idに代入します。player_idで動画を埋め込む枠のid名を取得します。今回はサムネイルの次に動画用のdivタグを設置しているので、$(this).next().attr('id')でid名を拾ってます。ここはHTML構造に応じて変更してください。Youtubeのコンストラクタを作成し、オプションを配列で渡してあげます。先ほど取得した動画IDや枠のid名もここで使います。オプションの詳細については割愛しますが、細かい設定に関してはこちらに書いてあります。Youtube動画が枠内に作成され読み込みが完了すると、onPlayerReady関数が実行され、自動再生されます。最後にサムネイルの表示をhide()で消します。APIを使ったやり方とは少し違う、通常の埋め込みiframeにpostMessageを使ってサムネイルをクリックすると再生はさせるやり方です。CSSなどは先ほどのとほぼ同じで、枠の代わりにiframeのYoutube埋め込み動画を配置しています。スマホ判定も同様に入れてあります。注意したいのはiframeを読み込むURLの後ろに「?enablejsapi=1」を付ける点です。class="movie"></iframe>さきほどと同様に音声オフを追加しますが、こちらはiframeの属性に追加します。});}eachにしているのは複数のiframeを配置した時のためです。$(this).hide();});サムネイルをクリックすると、iframeに対してpostMessageで再生の指令を送り動画が再生されます。サムネイルを削除をします。iframeの注意点こちらの方法の注意点として、たくさんのiframeを配置すると初回の読み込みが重くなります。設置してある分だけ通信が発生するからです。それに対してAPIを使ったそのため、自分は最初のAPIを使ったやり方で作成しています。以下に比較のページがあります。verスマホのYoutube自動再生についてPCの場合、muteを追加しなくても自動再生されますが、iOSの場合は音声オフをオフにしないと再生されません。サムネイルをタップしたあと、再度動画の再生ボタンを押さないといけない状況になり、これでは不便です。そのため、スマホ判定の処理を挟んでmuteを追加しています。Androidの場合Androidの実機で試したわけではないのですが、下記参考リンクにはAndroidでのYoutubeの自動再生はできないようです。Studioのエミュレータ(APIレベル26)の場合は再生されたので、機種やOSよってはできるのかも...?スマホの自動再生の是非スマホが何故自動再生に制限をかけているかと言えば、通信帯域が限られている中で動画のような大容量コンテンツを勝手に再生しないようにするためでしょう。いわゆる勝手に「ギガを食う」ことさせないためです。自動再生の条件に消音としているのも、電車の中でWebサイト見ていたら突然音が流れ始めて周りのひんしゅくを買うの防ぐためでしょう。そのためユーザーの意図しない動画の再生は避けるべきだと思います。動画を自動再生させる際にはユーザーを配慮し、特にスマホサイトの場合は良く検討しましょう。