あなたの興味を広げる話題を。

新潟県 中子の桜©Koichi_Hayakawa(Licensed under CC BY 4.0

ブログにYouTube動画を挿入したらサムネイル画像が表示されない原因は?

2019年05月20日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など 0

YouTubeのイメージ画像

今回は、FC2ブログの記事にYouTube動画を埋め込んでみたらサムネイル画像が表示されない場合の話しについて。

ブログの記事にYouTube動画を挿入する場合は、YouTubeで発行される動画の埋め込みコードをそのまま使用するブロガーさんも多いかと思います。

しかし、そのまま使用すると、表示されるサムネイルが重かったりするものですから、ボクなんかはサイトのページ表示速度がどうしても気になってしまう。

そこで、lazyloadの導入で遅延読み込みをさせているのですが、そうすると、さまざまな過程のなかでちょっとした不具合が発生することがあります。

そのひとつとしてよくあるのは、ブログ記事に埋め込んだYouTube動画で、サムネイル画像の表示されないものがかなり多く存在するということ。

ブログ記事にYouTube動画を埋め込んだらサムネイル画像が灰色表示されるケース

ブログ記事にYouTube動画を埋め込んだとき、灰色のサムネイル画像が表示されることってよくありますよね。

ブログ記事にYouTube動画を埋め込んだ際に表示される灰色のサムネイル画像の例

これだとまるで何の動画か分からないし、動画が視聴できないみたいですよね。

調べてみたところ、この灰色の表示がされる原因は、YouTubeのサムネイル画像サイズが動画によって違うようなんです。

YouTubeは古い動画もありますから、その時々によって設定されたサムネイル画像の仕様も異なっているみたいですね。

よって、YouTube動画のサムネイル画像は、小さなものから大きなものまで数種類の画像サイズが存在している。

そこで、自サイトに動画を埋め込む際にはその動画に設定されたサイズのサムネイル画像を指定してあげないといけない訳なんです。

しかし、わざわざそんなこと調べるのは面倒だよね、ということで、何か良い方法を探してみたところ、便利なツールを発見しました(^^)

YouTubeのサムネイルurlを自動取得してくれる便利ツール

ブログ記事に使いたいYouTube動画のサムネイル画像を調べてくれる便利ツールを発見しました。

>>YoutubeサムネイルURL取得|ちょっと便利なツール・ジェネレーター置き場

手順としては、該当するYouTube動画のurlもしくは発行された動画の埋め込みコードを「動画のURLを貼り付けてください」のところにコピペしてEnterキーを押すだけ。

YoutubeサムネイルURL取得 ちょっと便利なツール・ジェネレーター置き場の使用例1

すると、そのYouTube動画で取得可能なサムネイル画像のurlを自動取得してくれるのです。

YoutubeサムネイルURL取得 ちょっと便利なツール・ジェネレーター置き場の使用例2

先ほどの、サムネイル画像が灰色表示されてしまう理由は、コレが原因でした。ブログ記事に動画を埋め込むとき、サムネイルの設定されてない画像サイズを指定していたんですね。

おわりに

YouTube動画から取得したサムネイル画像貼り付け&リンク挿入の著作権問題について

今回の記事を書くにあたっていろいろとネット検索したところ、重いYouTube動画を埋め込む代替策が書いてありました。

>>簡単にできる!Youtube動画のサムネイル画像を取得する方法

ブログ記事に埋め込みコードを記述する代わりとして、YouTube動画から取得したサムネイル画像の貼り付け&リンクの挿入というもの。

いわゆる「出典」という形式だと思います。しかし、これってどうなんでしょうか?

そもそもYouTube動画は内容によっては著作権侵害にあたるケースもありますから、よく検討のうえ、自己責任でおこなう必要がありそうです。

▼関連記事

YouTube動画をブログへ埋め込む時に気を付けたい著作権や規約についてまとめとく!

YouTube動画のサムネイル画像を遅延読み込みさせるlazyloadの導入方法について

なお、重いYouTube動画を埋め込む際にページの読み込み速度を何とかしたいとお考えの方はlazyloadを使った遅延読み込みがおすすめです。

導入方法は、ボクのお借りしているFC2ブログテンプートと同じ作者さんのものをお使いであれば、下の記事が参考になりますよ。

▼関連記事

Lazyloadを使ってみる【上級編】

検討編、初級編、中級編を経て最終の上級編です。
私が制作したテンプレートを利用していることを前提とした記事内容です。


検討編では「Lazyloadingを導入するかしないかの判断」
初級編では「テンプレートに導入済みのLazyloadingを個別記事でも利用する方法」
中級編では「関連記事リストと新着記事リストにも適用する方法」
を説明しました。
今回の上級編では html5 picture要素の使い方とLazyloading用ブログカー...

関連記事

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5925)
┣  胃がんブログ (264)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5585)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (481)
┣  がんブログ (272)
┗  がんニュース (209)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (137)
┣  Amazonセール (2)
┗  📱kindleセール (134)
おもしろグッズ (10)
今日のエッセイ (102)
ニュース・芸能・話題 (745)
┗  転職・キャリアアップ (19)
恋愛・人間関係 (30)
終活ブログ (10)
グルメ (71)
┣  低糖質レシピ (10)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (215)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (176)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (4)
iPhone の使い方・アプリなど (31)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)