古いYouTubeの動画埋め込みコードにSearch Consoleで警告を受けた

YouTubeでは、動画をWEBやブログに埋め込みをすることができるコードが提供されています。

YouTube動画の埋め込みコードとは

PCだと動画下部分にある共有をクリックすると。

WEBやブログ用の埋め込みコード、Facebook、ツイッターの埋め込みパーツなどがセットになったポップアップが表示されます。

ポップアップ画面の中から、埋め込むと書かれた＜＞マークのボタンをクリックすると、埋め込み用の＜iframe＞タグを使ったコードが表示されるので、これをWEBやブログに貼り付けすれば、動画を埋め込むことができます。

コピペできるコードは＜ifame＞のシンプルなタグになっています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_5XD4KZwi1E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

画像掲示板でのYouTube埋め込み

「画像掲示板の泉」では、掲示板に投稿されたYouTubeのURLから動画IDを抜き取り、このYouTube動画埋め込みコードにIDをはめ込むことで、掲示板へYouTube動画の貼り付けを実現してました。

YouTubeやニコニコ動画のURLから動画IDを抽出する方法は下記の記事でもご紹介しています。よければそちらもどうぞ。

古いYouTube動画の埋め込みコード

このYouTube動画の埋め込みタグですが、ちょっと前までは下記のような＜embed＞タグを使ったコードで提供されていました。ちょっと前といっても年単位で前という感じとは思いますが。

<param name="movie" value="https://www.youtube.com/v/XXXXXXXXXXX"></param>
<param name="wmode" value="transparent"></param>
<embed src="https://www.youtube.com/v/XXXXXXXXXXX" type="application/x-shockwave-flash" wmode="transparent"  class="embed-responsive embed-responsive-4by3"></embed>

画像掲示板の埋め込みコードは古いYouTubeの埋め込みコード

YouTubeの動画貼り付けコードが＜embed＞タグ版から＜iframe＞タグ版に変わっていたことも知らずだったくらいなので、掲示板のYouTube動画貼り付け用コードも古い<embed＞タグ版のコードを使い続けておりました。すると、画像掲示板サイトのSearch Consoleに気になる警告がでていることに気が付きました。

古いYouTube埋め込みコードでSearch Consoleに警告が

GoogleのSearch Consoleのモバイルユーザビリティ部分に、「互換性のないプラグインを使用しています」との警告がでてしまっています。

「互換性のないプラグインを使用しています」 という警告自体あまりみたことがなかったため、GoogleのSearch Consoleヘルプで調べてみたところ、「サポートされていないプラグイン（Flash など）がページに含まれています」との説明がされていました。

互換性のないプラグインを使用しています

ほとんどのモバイル ブラウザでサポートされていないプラグイン（Flash など）がページに含まれています。HTML5 など、広くサポートされている最新のウェブ テクノロジーを使用してページを再設計することをおすすめします。

Search Console ヘルプ

type=”application/x-shockwave-flash”

警告を受けたURLが具体的にでていたので調べてみると、YouTubeの動画投稿があった掲示板スレとなっていました。

このページの中で「サポートされていないプラグイン（Flash など）がページに含まれる」といわれてしまうと、この古いYouTubeの動画埋め込みコードしか見当たりません。

<embed 
 src="https://www.youtube.com/v/XXXXXXXXXXX"
 type="application/x-shockwave-flash"
 wmode="transparent"
 class="embed-responsive embed-responsive-4by3">
</embed>

以前に自分のところで提供していたコードに警告をだしてくるとは大したもんだと思いましたが、Search Consoleが世の中の流れにしっかり合わせているということなのかもしれません。

プログラムを修正してSearch Consoleで修正報告

仕方ないので、現行のYouTubeの動画埋め込みコードを使う形に掲示板プログラムの修正を実施し、改めてSearch Consoleで修正報告をしておきました。

しばらくして、問題が修正されましたとの連絡を無事受けることができました。

おわりに

Search Consoleから警告を受けたことがきっかけで、YouTubeの動画埋め込みコードが変わっていたことに気が付いたという話でした。

ちなみに、試しにWordPressのYouTube埋め込みコードを試してみましたが、しっかりと＜iframe＞タグ版の埋め込みになっていました。さすがです。

Chromeで＜iframe＞で読み込みされたあたりをみてみると、動画プレーヤーを生成するためにYouTubeから結構な量のコードを読み込んでいることが分かります。動画データ以外にも様々なコードを日々転送するサーバー群とは相当凄いんだろうなと思ってしまいました。