hatenafeedlynismit-logohearttagcalendartwitterfacebookgithubfeedchainlinkedinrotate-leftget-pocket

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

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

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

URLを入れるだけ

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

画像サイズURL
120×90120×90http://i.ytimg.com/vi/xTU0K5q7Zbo/default.jpg
120×90120×90http://i.ytimg.com/vi/xTU0K5q7Zbo/1.jpg
120×90120×90http://i.ytimg.com/vi/xTU0K5q7Zbo/2.jpg
120×90120×90http://i.ytimg.com/vi/xTU0K5q7Zbo/3.jpg
320x180320×180http://i.ytimg.com/vi/xTU0K5q7Zbo/mqdefault.jpg
480x360480×360http://i.ytimg.com/vi/xTU0K5q7Zbo/hqdefault.jpg
480x360480×360http://i.ytimg.com/vi/xTU0K5q7Zbo/0.jpg
640x480640×480http://i.ytimg.com/vi/xTU0K5q7Zbo/sddefault.jpg
1280x7201280×720http://i.ytimg.com/vi/xTU0K5q7Zbo/maxresdefault.jpg

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

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

Michinobu Nishimoto (@nismit_)

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

See Also