YouTubeの動画サムネイルを簡単に取得する方法

  • Posted on
  • Category : Tips
YouTubeの動画サムネイルを簡単に取得する方法

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

※以下はこちらの動画をサンプルに説明しています。

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

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

見ての通り、srcで直接指定して画像を取得してきます。
Video IDというところには動画コードを指定して、.jpgの前のxの部分で画像のサイズを指定します。

動画コードは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.jpg0.jpg2.jpgはデフォルトで使用されている画像をそれぞれ違うサイズで取得でき、1.jpg3.jpgでまた別のサムネイル画像を取得できます。
もし動画コードやサイズ指定部分で記述がおかしい場合は、一番右下のような画像が表示されます。

YouTubeの動画サムネイルを簡単に取得 サンプル表示

ちなみに…

今回サンプルで使用した動画ではそんなに目立ちませんが、動画によってはサムネイルの上下もしくは左右に思いっきり黒い帯(?)のようなものが出ます。
詳しく調べてないのでちゃんとした理由とかはわかりませんが、おそらく投稿時のサイズなどが関係しているよう。
どうしても気になる場合は他の手段で取得してくるか、もしくは最初から自分で画像を作ってしまったほうが早いと思います。

もし、この方法で手っ取り早くサムネイルを取得して黒帯もどうにかしたい場合は、CSSを使って(パッと思い浮かんだものだと、overflowpositionを使用したりして)調整すれば、とりあえずその部分を見えなくすることはできます。

Back to Top

YouTubeの動画サムネイルを簡単に取得する方法

YouTubeの動画サムネイルを簡単に取得する方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。