知らなかったので備忘録。
APIを使ったりしてちょっと面倒なんだろうと思っていたんですが、こんなに簡単に取得できるんですね。

YouTubeで公開されている動画のサムネイルを取得するには、基本的に下記のように記述します。

<img src="http://img.youtube.com/vi/{Video ID}/{xxx}.jpg" alt="alt here..." />

img要素のsrcに直接指定して画像を取得し、サンプルコード内で{Video ID}としている箇所に動画コードを指定し、.jpgの前の{xxx}の部分で画像のサイズを指定します。

動画コードはURLでhttp://www.youtube.com/watch?v=の後に書かれている部分を指定し、サンプルとしてhttp://www.youtube.com/watch?v=hTWKbfoikegというURLの動画から取得したい場合は末尾にあるhTWKbfoikegが動画コードとなります。

サイズは以下5サイズの指定ができます。

  • mqdefault.jpg – 320×180px
  • 0.jpg – 480×360px
  • 1.jpg – 120×90px
  • 2.jpg – 120×90px
  • 3.jpg – 120×90px

上記を踏まえ、今回サンプルで使用している動画のサムネイルをそれぞれ表示させる場合は、下記のようにして記述します。

<!-- 320×180px -->
<img src="http://img.youtube.com/vi/hTWKbfoikeg/mqdefault.jpg" alt="alt here..." />

<!-- 480×360px -->
<img src="http://img.youtube.com/vi/hTWKbfoikeg/0.jpg" alt="alt here..." />

<!-- 120×90px -->
<img src="http://img.youtube.com/vi/hTWKbfoikeg/1.jpg" alt="alt here..." />

<!-- 120×90px -->
<img src="http://img.youtube.com/vi/hTWKbfoikeg/2.jpg" alt="alt here..." />

<!-- 120×90px -->
<img src="http://img.youtube.com/vi/hTWKbfoikeg/3.jpg" alt="alt here..." />

記述後に確認すれば、下のイメージのようにサムネイルが取得されています。
mqdefault.jpg, 0.jpg, 2.jpgはデフォルトで使用されている画像をそれぞれ違うサイズで取得でき、1.jpgと3.jpgでまた別のサムネイル画像を取得できます。
もし動画コードやサイズ指定部分で記述がおかしい場合は、一番右下のような画像が表示されます。

取得したイメージ一覧

 

ちなみに、今回サンプルで使用した動画ではそんなに目立ちませんが、動画によってはサムネイルの上下もしくは左右に思いっきり黒い帯（？）のようなものが出ます。
詳しく調べてないのでちゃんとした理由とかはわかりませんが、おそらく投稿時のサイズなどが関係しているようで、どうしても気になる場合は他の手段で取得してくる、もしくは最初から自分で画像を作ってしまったほうが早いと思います。
もし、この方法で手っ取り早くサムネイルを取得して黒帯もどうにかしたい場合は、CSSを使って（パッと思い浮かんだものだと、overflowやpositionを使用したりして）調整すれば、とりあえずその部分を見えなくすることはできます。