hatena feedly nismit-logo heart tag calendar twitter facebook github feed chain linkedin rotate-left get-pocket

YouTubeの動画のサムネイル取得が思った以上に簡単だった件

YouTubeの動画のサムネイルを取得したい

クライアントさまから、「WordPressを使って、YouTubeにアップした動画を紹介したいが、動画自体はYouTubeのサイトの方で見せたい」という要望があり、 アップした動画のIDをカスタムフィールドに入れてもらって・・等を考えてたのですが、 サムネイルはどうしようかと思いYouTube側から取れないか調べてみたら、めちゃくちゃ簡単にサムネイルが取得できました。

URLを入れるだけ

参考サイトでも紹介されているように、URLを入れるだけでサムネイルが取得出来ました。
//i.ytimg.com/vi/動画ID/画像サイズ.jpg
動画IDは
//www.youtube.com/watch?v=xTU0K5q7Zbo
太字の部分ですね。
自分でアップした動画からサムネイルを取って、一覧にしましたので、ご参考になれば幸いです。

画像 サイズ URL
120×90 120×90 http://i.ytimg.com/vi/xTU0K5q7Zbo/default.jpg
120×90 120×90 http://i.ytimg.com/vi/xTU0K5q7Zbo/1.jpg
120×90 120×90 http://i.ytimg.com/vi/xTU0K5q7Zbo/2.jpg
120×90 120×90 http://i.ytimg.com/vi/xTU0K5q7Zbo/3.jpg
320x180 320×180 http://i.ytimg.com/vi/xTU0K5q7Zbo/mqdefault.jpg
480x360 480×360 http://i.ytimg.com/vi/xTU0K5q7Zbo/hqdefault.jpg
480x360 480×360 http://i.ytimg.com/vi/xTU0K5q7Zbo/0.jpg
640x480 640×480 http://i.ytimg.com/vi/xTU0K5q7Zbo/sddefault.jpg
1280x720 1280×720 http://i.ytimg.com/vi/xTU0K5q7Zbo/maxresdefault.jpg

動画をアップした際にYouTube側で自動的に抽出される、3つのサムネイルがそれぞれあるみたいですね。 カスタムサムネイルを入れていると、そちらがdefaultに設定されるようです。
また、上下に黒い帯がついているのは、公式APIで説明されていました。

アップロードされたサムネイル画像が必要な寸法に一致しない場合、その画像はアスペクト比を変更することなく、正しいサイズに合わせてサイズ変更されます。画像はトリミングされませんが、サイズが正しくなるように黒いバーが含まれる場合があります。
Thumbnails – YouTube Google Developers より引用

Michinobu Nishimoto (@nismit_)

記事を書いてる人: 日本のWeb制作会社に約2年半フロントエンドとして働いた後、カナダのバンクーバーで語学学校->専門学校->現地のWeb制作会社にフロントエンドとして就職。
詳しく知りたい方はこちらへ。