この記事を書いた背景

WordPress には、投稿や固定ページに閲覧したユーザーの
目を惹くようにするためのアイキャッチ画像という機能があります。

自分の場合は記事を書くときに YouTube 動画を載せることがあるのですが、
その際に YouTube 動画のサムネイル画像を
アイキャッチ画像として指定したくなることがあります。

サムネイル画像は、YouTube のクリエイターツールで表示されるものを
保存する方法などが基本かと思いますが、
もっと簡単に取得する方法として
今回はブラウザーの URL を指定するというやり方をご紹介します。

なお、今回の方法は動画の任意の場所を切り出すものでありません。

画像を取得する方法

ブラウザーで動画を取得する方法は、次の URL を指定するだけです。

http://i.ytimg.com/vi/＜動画のID＞/＜画像サイズ＞.jpg

i.ytimg.com は YouTube 動画の一部を
画像として書き出す専用のサーバーのようですね。

YouTube のサイトの HTML ソースを見ると
このサーバーがよく出てくるのがわかると思います。

動画のID

「動画ID」は YouTube の動画に割り当てられる固有の番号で
「v=」のあとの部分のことです。

YouTube 動画の URL が
「https://www.youtube.com/watch?v=fPgRIfZrvWs」の場合、
「fPgRIfZrvWs」の部分のことです。

画像サイズ

現在の YouTube の仕様では
サムネイル画像は動画中から3つ切り出されて作られるらしく、
用途によって複数のサイズが用意されています。

以下、種類ごとに「画像サイズ」に指定する値を一覧にしました。

W120 x H90

• default.jpg(YouTube でサムネイルに設定した画像)
• 1.jpg(自動生成されたサムネイルの1つ)
• 2.jpg(自動生成されたサムネイルの1つ)
• 3.jpg(自動生成されたサムネイルの1つ)

例：http://i.ytimg.com/vi/fPgRIfZrvWs/default.jpg

W320 x H180

• mqdefault.jpg

例：http://i.ytimg.com/vi/fPgRIfZrvWs/mqdefault.jpg

W480 x H360

• hqdefault.jpg

例：http://i.ytimg.com/vi/fPgRIfZrvWs/hqdefault.jpg

簡単にデータを取得できるツールを作りました

指定したYouTube動画の情報を調査・取得するツールを作ったので公開しました。
ブックマークレットも用意したので、Chromeなどからボタン一発でYouTube動画の情報を取得することができます。

YouTube動画の情報調査ツール

まとめ

今回紹介した方法は YouTube が公式に提供しているものではないため、
そのうち使えなくなる可能性があります。

とはいえ似たような方法は今後も出てくるので
変わったらその方法に合わせればよいですね。

まぁしかし便利です(笑)

参考

YouTube Data API の概要