YouTube埋め込み時にオリジナル画像を用いる際の注意 - Qiita

YouTubeをサイト内に埋め込む際に、YouTubeの標準UIや再生ボタンなんかが 気に入らないので、クリック前の画像をオリジナルの画像として用意する場合は多いと思います。 その際、 オリジナルの画像にクリックイベントを持たせ、クリックされた瞬間に画像とYouTubeiframeを置き換える という実装にしてしまうと、画像の置き替えの際に一瞬画面内に何も映らない タイムラグが生じてしまいます。 これは、iframeをhtml内に埋め込んでから実際そこに表示されるまでに若干のラグがあるからです。 これを防ぐにはYouTubeAPIのコールバック関数を使うと良いです。 YouTubeAPIのコールバックのひとつに、動画の再生準備が整った時点で発火される onPlayerStateChange(event) というものがあり、これが発火されたタイミングでもともと表示されていた画像を 消すことで