WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • 予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法

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

film-589490_1280

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関連のサイトを立ち上げる時など役に立つかもしれません。

シェアしていただきありがとうございます。

film-589490_1280

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

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

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

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

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

  • S001_megane0220140830145944500-thumb-1200x800-56183-710x350

    完全無料!よく利用するフリー写真素材の配布サイトを17個まとめてみた。

    WEBサイトの制作やブログのアイキャッチなどを作る時など、フリーの写真素材を使う機会が多くあると思います。頻繁に使用しているフリー写真素材の配布サイトをまとめてみました。 記事を読む

  • leopard-1086908_1280

    iPhoneのsubmitボタンのスタイルを初期化する方法

    iPhoneのsubmitボタンのスタイルを初期化する方法をご紹介します。iPhoneのsubmitボタンはデフォルトで角丸のスタイルが適用されています。このスタイルを解除する方法をまとめてみました。簡単な内容ですが知らない方には重宝な内容になっています。 記事を読む

  • PAK86_kusoyarareta20140125500 (2)

    知らずに損した!最初・最後・奇数・偶数・○番目など、要素を指定して装飾する方法

    疑似クラスを使うことで、CSSを複雑にすることなく指定要素を装飾することができます。「この3番目のliタグだけ色を変えたい」など特定の要素だけを装飾したいケースの参考にしてください。 記事を読む

  • oy151013249932_tp_v-2

    背景画像をレスポンシブに対応させる方法

    背景画像をレスポンシブに対応させる方法をご紹介します。paddingを指定して横幅と縦幅の比率を保持したまま、背景画像を縮小拡大する方法です。3分間です。3分間で背景画像をレスポンシブに対応させる方法をマスターできます。 記事を読む

  • PPP_cyairoihushinomegane500

    CSSで背景を半透明にする方法

    「CSSで背景色を半透明する方法」をご紹介します。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)