WordPress のアイキャッチ画像に適した YouTube 動画のサムネイル画像をブラウザーのURLを指定するだけで取得する方法

この記事を書いた背景

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 の概要

10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント

【最後まで読んでくれたあなたに】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

・ワードプレスを使いこなせるコツを知りたい!
・自分にピッタリのサーバーを撰びたい!
・無料ブログとの違いを知りたい!
・あとで悔しくならない初期設定をしておきたい!
・プラグイン選びの方法を知っておきたい!
・SEO対策をワードプレスで行うポイントを知りたい!
・自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

※登録後に表示される利用条件に沿ってご利用ください

コメントを残す