YouTubeでは、動画をWEBやブログに埋め込みをすることができるコードが提供されています。
YouTube動画の埋め込みコードとは
PCだと動画下部分にある共有をクリックすると。
![YouTube動画の埋め込みはPCは右下の共有ボタンから](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-6記事画像-1024x576.png)
WEBやブログ用の埋め込みコード、Facebook、ツイッターの埋め込みパーツなどがセットになったポップアップが表示されます。
![YouTubeの共有ボタンをクリックするとポップアップされる共有ツール](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-7記事画像-1024x576.png)
ポップアップ画面の中から、埋め込むと書かれた<>マークのボタンをクリックすると、埋め込み用の<iframe>タグを使ったコードが表示されるので、これをWEBやブログに貼り付けすれば、動画を埋め込むことができます。
![YouTubeの動画埋め込みコードがコピペできる](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-8記事画像-1024x576.png)
コピペできるコードは<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のモバイルユーザビリティ部分に、「互換性のないプラグインを使用しています」との警告がでてしまっています。
![互換性のないプラグインを使用していますというSearch Consoleの警告](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125記事画像-1024x576.png)
「互換性のないプラグインを使用しています」 という警告自体あまりみたことがなかったため、GoogleのSearch Consoleヘルプで調べてみたところ、「サポートされていないプラグイン(Flash など)がページに含まれています」との説明がされていました。
![「互換性のないプラグインを使用しています」に関するSearch Consoleヘルプ](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-2記事画像-1024x576.png)
互換性のないプラグインを使用しています
Search Console ヘルプ
ほとんどのモバイル ブラウザでサポートされていないプラグイン(Flash など)がページに含まれています。HTML5 など、広くサポートされている最新のウェブ テクノロジーを使用してページを再設計することをおすすめします。
type=”application/x-shockwave-flash”
警告を受けたURLが具体的にでていたので調べてみると、YouTubeの動画投稿があった掲示板スレとなっていました。
![Search Consoleで警告を受けた掲示板ページ](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-3記事画像-1024x576.png)
このページの中で「サポートされていないプラグイン(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で修正を報告する](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-4記事画像-1024x576.png)
しばらくして、問題が修正されましたとの連絡を無事受けることができました。
![Search Consoleでの問題が解決されたとの報告](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-5記事画像-1024x576.png)
おわりに
Search Consoleから警告を受けたことがきっかけで、YouTubeの動画埋め込みコードが変わっていたことに気が付いたという話でした。
ちなみに、試しにWordPressのYouTube埋め込みコードを試してみましたが、しっかりと<iframe>タグ版の埋め込みになっていました。さすがです。
Chromeで<iframe>で読み込みされたあたりをみてみると、動画プレーヤーを生成するためにYouTubeから結構な量のコードを読み込んでいることが分かります。動画データ以外にも様々なコードを日々転送するサーバー群とは相当凄いんだろうなと思ってしまいました。
![YouTube動画を埋め込みすると展開されるコード](https://blog.dtn.jp/dtn_wp_admin/wp-content/uploads/20211125-9記事画像-1024x576.png)