LoginSignup
5
4

More than 5 years have passed since last update.

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

Posted at

YouTubeをサイト内に埋め込む際に、YouTubeの標準UIや再生ボタンなんかが
気に入らないので、クリック前の画像をオリジナルの画像として用意する場合は多いと思います。

その際、

  • オリジナルの画像にクリックイベントを持たせ、クリックされた瞬間に画像とYouTubeiframeを置き換える

という実装にしてしまうと、画像の置き替えの際に一瞬画面内に何も映らない
タイムラグが生じてしまいます。

これは、iframeをhtml内に埋め込んでから実際そこに表示されるまでに若干のラグがあるからです。

これを防ぐにはYouTubeAPIのコールバック関数を使うと良いです。

YouTubeAPIのコールバックのひとつに、動画の再生準備が整った時点で発火される

onPlayerStateChange(event)

というものがあり、これが発火されたタイミングでもともと表示されていた画像を
消すことで、画像 → 動画の置き換えをタイムラグなく行うことができます。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4