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

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

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

YouTube動画の埋め込みはPCは右下の共有ボタンから
YouTube動画の埋め込み方法。PCは右下の共有ボタンから。

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

YouTubeの共有ボタンをクリックするとポップアップされる共有ツール
YouTubeの共有ボタンをクリックするとポップアップされる共有ツール

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

YouTubeの動画埋め込みコードがコピペできる
YouTubeの動画埋め込みコードがコピペできる

コピペできるコードは<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の警告
互換性のないプラグインを使用していますというSearch Consoleの警告

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

 「互換性のないプラグインを使用しています」に関するSearch Consoleヘルプ
「互換性のないプラグインを使用しています」に関するSearch Consoleヘルプ

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

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

Search Console ヘルプ

type=”application/x-shockwave-flash”

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

 Search Consoleで警告を受けた掲示板ページ
Search Consoleで警告を受けた掲示板ページ

このページの中で「サポートされていないプラグイン(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で修正を報告する
Search Consoleで修正を報告する

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

 Search Consoleでの問題が解決されたとの報告
Search Consoleでの問題が解決されたとの報告

おわりに

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

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

動画に深い意味はありませんが…

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

YouTube動画を埋め込みすると展開されるコード
YouTube動画を埋め込みすると展開されるコード

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。