予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法
  • 予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法
  • 記事公開:2015/11/09
  • 最終更新:2015/11/10

予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法

YOUTUBE動画のサムネイルを取得する方法をご紹介します。YOUTUBEの様々なサイズのサムネイルを取得したい方に向けたコンテンツです。2分後にはお好きなサイズのサムネイルを自由に取得できるようになります。

この記事は約 4 分で読めます。

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

YOUTUBE動画のサムネイル画像は、URLを指定するだけで取得することが出来ます。
取得したい動画のIDさえわかれば、様々なサイズのサムネイルを取得可能です。

例えば、以下の動画を例にサムネイル画像を取得してみましょう。

まずは、動画のIDを取得しましょう。

https://www.youtube.com/watch?v=Skw43XwX6oc

動画IDは動画URLの中に含まれています。
動画URLの太文字部分が動画IDとなっております。

小さいサムネイル画像を取得してみよう。

http://i.ytimg.com/vi/Skw43XwX6oc/default.jpg

上記のURLにアクセスしてみてください。
以下の小さなサイズ(W120 x H90)のサムネイル画像が表示されます。

default

URLの太文字部分が取得したい動画のIDとなっています。
この部分を置き換えることでお好きな動画のサムネイルを取得することが出来ます。

小さなサイズのサムネイルは以下のURLでも取得可能です。

http://i.ytimg.com/vi/Skw43XwX6oc/1.jpg
http://i.ytimg.com/vi/Skw43XwX6oc/2.jpg
http://i.ytimg.com/vi/Skw43XwX6oc/3.jpg

サイズは統一ですが、URLごとに表示されるサムネイルは異なります。

中くらいサムネイル画像を取得してみよう。

http://i.ytimg.com/vi/Skw43XwX6oc/mqdefault.jpg

上記のURLにアクセスしてみてください。
以下の中くらいサイズ(W320 x H180)のサムネイル画像が表示されます。

mqdefault

このサイズのサムネイル画像はこの1種類しか取得できません。

大きいサムネイル画像を取得してみよう。

http://i.ytimg.com/vi/Skw43XwX6oc/hqdefault.jpg

上記のURLにアクセスしてみてください。
以下の大きいサイズ(W480 x H360)のサムネイル画像が表示されます。

hqdefault

大きいサイズのサムネイル画像は以下のURLでも取得可能です。

http://i.ytimg.com/vi/Skw43XwX6oc/0.jpg

まとめ

YOUTUBE動画のサムネイル画像を簡単に取得する方法をご紹介しました。

以前、YOUTUBE動画のまとめサイトに携わった時に学んだ内容です。
YOUTUBE関連のサイトを立ち上げる時など役に立つかもしれません。

この記事が気に入ったら【いいね】しよう!

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016-02-15

    GOOGLEマップをレスポンシブに対応させる方法

    GOOGLEマップをレスポンシブに対応させる方法をご紹介します。GOOGLEマップは埋め込みコードを設置しただけはレスポンシブに対応していません。この記事を読めば3分でGOOGLEマップをレスポンシブに対応させることができます。 記事を読む

  • 2017-07-22

    【レスポンシブサイト】デバイスの横幅で画像を切り替える方法

    サイトにアクセスしたデバイスの横幅で画像を切り替える方法をご紹介します。レスポンシブサイトで、PCとスマホで違う画像を表示させたい場合などに使えます。5分程度で実装できますので、興味のある方は参考にしてください。 記事を読む

  • 2016-02-04

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。CSSだけでデザインにグラデーションを導入したい方は参考にしてください。5分後にはグラデーションを自由自在に操れるようになります。 記事を読む

  • 2016-04-04

    画像加工はもう不要!CSSだけで画像を円形にする方法

    CSSだけで画像を円形にする方法をご紹介します。この方法を知っていれば、画像を個別に加工する必要はなくなります。スタイリッシュな円形画像をサイトデザインに取り入れたい方、ぜひ参考にしてください。それでは、CSSだけで画像を円形にする方法をどうぞ! 記事を読む

  • 2014-12-16

    Google web fontsを使う機会があったので使い方をまとめてみました。

    Google web fontsの使い方を解説しています。コピペで簡単!あなたのサイトでGoogle web fontsを使ってみませんか? 記事を読む

コメントを残す


(必須)

CAPTCHA