YouTubeのネイティブ埋め込みでは、サイト上で表示できないもの
ホーム ブログ YouTubeのネイティブ埋め込みでは、サイト上で表示できないもの

YouTubeのネイティブ埋め込みでは、サイト上で表示できないもの

YouTubeのネイティブ埋め込みでは、ウェブサイト上で表示できないもの

他のWordPressサイト運営者たちから、いつも同じことを耳にしていました。「手動でYouTubeを埋め込むと、見た目以上に負荷がかかり、予想以上に頻繁に表示が崩れる上、知らぬ間にページの読み込み速度を低下させてしまう」というのです。

長い間その話を聞いてきたので、実際に試してみて、そうした不満がどれほど的を射ているのか確かめてみることにした。

YouTubeのネイティブ埋め込み機能では、サイト上で何ができないのか、1動画という制限から、制御不能な「目に見えない不具合」に至るまで、具体的にご説明します。さらに、私自身が実施したテストによる実際の「実施前・実施後」の数値データもご紹介します。

この記事を読み終える頃には、ネイティブ埋め込み機能の限界がどこにあるのか、そしてサイト上でチャンネル全体を、迅速かつ自動的に更新される形で表示する方法がわかるようになるでしょう。

簡単な答え:ネイティブ埋め込みではできない4つのこと

ネイティブ埋め込みは、厳選された動画を1本表示するだけで、自動更新は行われず、何の前触れもなく動作しなくなる可能性があり、ページの読み込みを重くします。これらが4つの問題点ですが、そのうちの1つだけが、あらゆるガイドで言及されている「速度の低下」という問題なのです。

Swarmifyによると、YouTubeのデフォルトの埋め込み機能は、読み込み時間を1.5~3秒、ページの容量を1.3~2.6 MBHTTPリクエストを20件以上増加させるという。

YouTubeの埋め込みを手動で行ったことで負荷が増加した

ご覧の通り、速度の問題は間違いなく存在します。しかし、4つの問題の中では最も軽微なものです。

測定・管理可能な速度。残りの3つの制限は、ネイティブ埋め込み機能の仕組みに組み込まれており、ユーザー側で設定を変更しても無効にすることはできません。その制限は、以下の通り、ごく単純明快です:

  • 厳選された動画が1本表示されます。チャンネル全体やプレイリストを1つのブロックとして一括で追加する方法はありません。動画は1つずつ、手動で貼り付ける必要があります。
  • 自動更新されることは決してありません。新しい動画を投稿しても、ページは更新されません。そのたびに、自分でページに戻って新しい動画を埋め込まなければなりません。
  • 何の前触れもなく再生できなくなることがあります。YouTubeでは問題なく再生できる動画でも、埋め込みを行うと「この動画は利用できません」や「再生が制限されています」と表示されることがあり、YouTubeのヘルプによると、この設定は動画の所有者が管理しています。この設定を無効にすることはできません。
  • ページの負荷が高まります。埋め込みを行うたびに、上記の基準値に示されているスクリプトやリクエストが読み込まれることになります。
YouTubeのネイティブ埋め込みにおける4つの主な問題点

他の部分はざっと目を通さなくても、これだけで全体像は把握できるでしょう。ネイティブ埋め込み機能は、動画が1本だけなら問題ありません。しかし、チャンネルの注目度を高めたり、常に最新の状態を保ったり、安定した動作を維持したりすることを求めると、限界にぶつかってしまいます。

なぜ「単に遅いだけ」という見方は本当の問題を見落としているのか

YouTubeの埋め込みに関する記事の多くは、ある一点で話を終わらせてしまいます。「埋め込みはサイトの表示速度を低下させるので、レイジーロードして済ませよう」という具合です。このアドバイスが間違っているわけではありません。ただ、それは事実の半分に過ぎないのです。

私自身も長い間、その見方に惑わされていました。スピードは誰もがすぐに気づくものですが、そこにばかり注目が集まるあまり、より難しい問題が見過ごされてしまっているのです。

完全にレイジーロードされた埋め込みでも、表示される動画は1本だけです。新しい動画を自動的に追加することもありません。動画の所有者が埋め込みを無効にした瞬間、「動画は利用できません」というエラーが表示され、YouTubeのヘルプによると、その設定はあなたではなく、動画の所有者が決定するものだと確認されています。

YouTubeの埋め込みは、投稿者によって無効にされています

つまり、速度は症状であって、根本的な問題ではない。真の限界は構造的なものだ。それは個々のiframeの動作そのものに組み込まれており、いくら調整しても変わることはない。

再生速度を調整しても、チャンネルをページに掲載することはできません。そこが壁なのです。この記事の残りの部分では、その壁を一つずつ取り除いていきます。

「ネイティブ埋め込み」では、1本の動画のみが表示されます。チャンネルやプレイリストは表示されません。

YouTubeの「共有」→「埋め込み」パネルを開き、表示されるコードを確認してください。そのiframeの中に、1つの動画IDが埋め込まれています。そのIDこそが、この仕組みのすべてです。ネイティブの埋め込み機能は、コピーした1つの動画のみを表示するように設計されており、それ以外は何も表示されません。

自分のチャンネルをアピールしたいと思うまでは、これで問題なく機能します。

YouTubeの埋め込みコード(手動)

たとえば、毎週動画を投稿していて、サイト上にそれらを紹介するページを作りたいとします。ネイティブの埋め込み機能には、「自分のチャンネルを表示する」という設定も、「このプレイリストを表示する」という設定もありません。貼り付けた1つの動画IDのみを認識するだけです。

つまり、手作業で行うわけです。動画1の埋め込みコードをコピーして貼り付け、動画2の埋め込みコードをコピーして貼り付けます。ページに掲載したいクリップがすべてなくなるまで、この作業を繰り返します。

それから、来週も、その次の週も、また同じことを繰り返します。

ここで、多くの人が思いがけないことに気づくのです。いったんページに埋め込み動画が掲載されると、それ以降は更新されなくなります。YouTubeに新しい動画を投稿しても、ページの内容は変わりません。

新しい動画を追加するには、WordPressに戻り、新しい埋め込みコードを取得して、動画をアップロードするたびに自分でそれを貼り付ける必要があります。これが最初のハードルであり、最も大きなハードルでもあります。

何の警告も出さずに失敗する埋め込み:「動画が利用できません」と「再生が制限されています」

ここで、多くの人が予期しない問題に直面します。YouTubeでは問題なく再生される動画でも、自分のサイトに埋め込むと、実際のページではエラーが表示されてしまうのです。

あなたの側には何の問題もありません。YouTubeのヘルプによると、動画の所有者が埋め込みをブロックするルールを設定しており、あなたのサイトからそのルールを無効にすることはできないとのことです。

動画の代わりに表示される可能性のある具体的なメッセージは以下の通りです:

  • 「動画は利用できません」
  • 「YouTubeで視聴」
  • 「動画はご利用いただけません。この動画は、特定のサイトでの再生が制限されています」
  • 「この動画はご利用いただけません。投稿者が、お住まいの国でのこの動画の公開を許可していません」
  • 「この動画の再生は、動画の所有者によって他のウェブサイトでは無効にされています」

これらのエラーは、あなたではなく、動画の所有者または権利者が管理しています。YouTube以外で動画を再生できるかどうかは動画の所有者が決定し、所有者はいつでも埋め込み機能を無効にすることができます。

YouTube動画の埋め込みを許可または制限する

つまり、これが2つ目の壁です。ネイティブの埋め込み機能は、ユーザーに非がないにもかかわらず動作しなくなることがあり、その際は何の警告もなく突然動作しなくなり、動作しなくなった原因となった設定をユーザーが制御することはできません。

WordPressサイトの運営者が、乗り換える前に実際に報告していること

もしこうした壁にぶつかったことがあるなら、あなただけではありません。同じような不満が何度も繰り返し聞かれます。

Smash Balloonは、数百万のウェブサイトで利用されているソーシャルフィードプラグインを開発しており、同社の「YouTube Feed」プラグインだけでも、WordPress.org上で10万件以上のアクティブインストール数を誇っています。

youtube feed pro ホームページ

プラグインによる埋め込みに切り替えた際、ユーザーから寄せられたコメントを調べてみると、3つの不満が特に目立ちます。

この点は私にとって心強いものであり、あなたにとってもそうだと思います。あなたが直面している問題は、あなたのミスによるものではありません。これらはネイティブの埋め込み機能に組み込まれているものであり、他にも何千人ものユーザーがまったく同じ問題に直面しています。

以下に3つの事例と、ネイティブの埋め込みがそれぞれを引き起こす理由を挙げます。

飼い主からの報告ネイティブの埋め込みがなぜその原因となるのか
「私の動画の中には、再生されずにエラーが表示されるものがあります。」動画の所有者が埋め込み機能を無効にしたため、ネイティブ埋め込みではその設定を回避する方法がありません。
「チャンネル全体やプレイリストを、常に最新の状態に保たれた1つのブロックとして表示することができません。」ネイティブ埋め込みは単一の動画IDに紐づいているため、チャンネルからデータを取得したり、自動的に更新したりすることはできません。
「最後に試したことで、テーマのレイアウトが崩れてしまった。」未加工のiframeは固定サイズを使用するため、テーマで割り当てられたスペースに必ずしも収まらず、はみ出したり縮小したりすることがあります。

最後の項目は、不快な体験をした後に多くの人が抱く疑問、「なぜ前回の動画プラグインを導入したらテーマのレイアウトが崩れてしまったのか?」という疑問に答えるものです。多くの場合、その原因はサイズ設定にあります。

YouTubeのネイティブ埋め込みに関するよくある不満点

ネイティブのiframeは、テーマに合わせて柔軟に調整されるようには設計されていないため、列からはみ出したり、画面サイズが小さい場合に不自然な隙間が生じたりする可能性があります。

これら3つの共通点に注目してください。いずれもスピードの問題ではありません。これらは「制御」「更新」「適合性」に関する問題であり、飼い主がフードを切り替える直前に挙げる理由そのものです。

問題の全容が把握できたところで、その解決策も理解しやすくなったはずです。次のセクションでは、フィードプラグインがこれらの課題をそれぞれどのように解決するのかを説明します。

フィードプラグインが、埋め込み機能では解決できない問題をどのように解決するのか

WordPressでは、この問題を解決する手段として「YouTube Feed Pro」が役立ちます。Smash Balloonのフィードプラグインは、サイト上にチャンネル、プレイリスト、個々の動画を表示し、前述した各「ウォール」に対応しています。

それぞれのギャップをどのように埋めていくのか、順を追って説明させてください。

  • チャンネル全体が表示されます。 YouTubeチャンネルのフィードやプレイリストのフィードを埋め込むと、すべての動画が1つのブロックにまとめて表示されます。これが、1動画という制限を解消する方法です。
  • 常に最新の状態を保ちます。YouTubeに新しい動画をアップロードすれば、フィードが自動的にそれを追加してくれます。毎週WordPressに戻って新しい埋め込みコードを貼り付ける必要はありません。これは、埋め込みが更新されず、手動で再埋め込みをしなければならないという問題を解決するものです。
  • テーマにぴったり合います。このプラグインは既存のテーマに合わせて設計されているため、フィードがレイアウト内に収まり、列からはみ出したり、画面が小さい場合に縮小されたりすることはありません。これは、「前のプラグインのせいでレイアウトが崩れてしまった」という不満を解決するものです。
ウェブサイトと連動したYouTubeフィードの例
  • 読み込みが速くなります。スマートなレイジーローディングでは、訪問者が実際に動画とインタラクションを行うまでYouTubeプレイヤーの読み込みを遅らせるため、重いスクリプトは誰かがクリックしたときにのみ読み込まれます。これがページの容量と読み込み時間の問題を解決する方法であり、その効果については次のセクションで測定結果を示します。
  • 信頼性は維持されます。バックアップキャッシュシステムにより、YouTubeがダウンしてもフィードは表示され続けます。これは、前述の「サイレント・フェイル」の問題に対する対策となります。

以下に、各ネイティブ埋め込みウォールと、フィードがそれをどのように処理しているかを併せて示します。

ネイティブ埋め込みの制限フィードではこれをどのように処理するか
1つの動画IDに関連付けられた1つの動画を表示しますチャンネル全体やプレイリストを1つのフィードとして表示します
更新されないため、アップロードのたびに手動で再埋め込みする必要がありますフィードを設定すると、新しいアップロードが自動的に追加されます
ページが表示されるたびに、容量の大きいプレイヤースクリプトを読み込むスマートなレイジーローディングは、訪問者が操作を始めるまでプレーヤーの再生を保留します
所有者が埋め込みをブロックした場合、何の通知もなく失敗するバックアップキャッシュにより、ダウンタイム中もフィードが表示され続けます
レイアウトを崩す原因となるiframeのサイズを修正しましたお手持ちのテーマに合わせて、その空間にぴったり収まるよう設計されています

これがその仕組みです。ネイティブ埋め込みが築くあらゆる障壁に対して、フィードは直接的な答えを用意しています。まだお見せしていないのは、その証拠、つまり実際のページからの具体的な数値です。それについては次にご紹介します。

「ビフォー・アフター:実際のページ重量テスト」

約束した証拠をここに示します。レイジーローディングが本当に皆が言うような効果があるのか確かめたかったので、他人が引用している数字を鵜呑みにするのではなく、自分でテストを行ってみました。

設定は簡単でした。WordPressのテストサイトを1つ作成し、1つのページに4本の動画を掲載しました。

手動で埋め込まれたYouTube動画の例

まず、それらをYouTubeの生のiframe埋め込みとして読み込みました。これは、自分で貼り付けるのと同じ「共有して埋め込む」コードです。

次に、スマートレイジーローディングを有効にした状態で、YouTube Feed Pro を通じて同じ 4 本の動画を再生しました。両方のページについて、Pingdom を使って測定を行いました。

プラグインを使って埋め込まれた同じYouTube動画

これらは、あるテストサイトでの私自身の結果です。これらはベンダーの主張ではなく、テーマやホスティングサービス、動画の内容によって数値は異なります。しかし、その傾向は明らかです。

測定YouTubeの埋め込みコード(生データ)YouTube Feed Pro(遅延読み込み)変更
読み込み時間2.60s1.49s43%高速化
HTTPリクエスト1456158%減少
ページの重さ7.0 MB1.9 MB73%軽量

そのページの重量の数字を見て、思わず足を止めて二度見してしまった。

生の埋め込みページでは、youtube.comだけでページ全体のウェイトの68.88%を占めていました。これは、訪問者が何かをクリックする前から、YouTubeから4.7 MBのデータが読み込まれていたことを意味します。

YouTubeのネイティブ埋め込みに対する速度テスト

フィードページにおいて、YouTubeが占める割合は、ページサイズの1%未満、リクエスト数の3.28%を下回った。

その理由は、前のセクションで説明した仕組みが実数で機能しているためです。遅延読み込みでは、フィードにはまずサムネイル画像が表示され、ユーザーが動画をクリックするまでYouTubeのフルプレイヤーは読み込まれません。

YouTube埋め込みプラグインが設定されたページの表示速度に関する統計

容量の大きいスクリプトは、実際に視聴を希望する訪問者のみに読み込まれます。それ以外のユーザーには、軽量で読み込みの速いページが表示されます。

では、質問に直接お答えすると、はい、埋め込みはサイトの表示速度を著しく低下させますが、レイジーローディングでこの問題は解決できます。4つの埋め込みをそのまま使用したところ、ページのサイズ が7.0 MB読み込み時間が2.60秒 になりました

スマートレイジーローディング機能を備えたフィードを通じて再生した同じ4本の動画は、1.9 MB、 1.49秒でした。

手動埋め込みとYouTube Feed Proの速度比較

これが、ページビューのたびにYouTubeの全データを読み込む場合と、訪問者がリクエストしたときにのみ読み込む場合との違いです。

よくある質問

YouTubeの動画を埋め込んでもいいですか?

YouTube動画の埋め込みは、通常、著作権上の問題にはなりません。埋め込みとは、YouTube上の動画へのリンクであり、自分のサイトに保存されたコピーではないため、動画をホストするのではなく、元の動画へのリンクを張っていることになります。ただし、動画の所有者はいつでも埋め込み機能を無効にすることができ、その場合は自分のページで動画が再生されなくなる点に留意してください。

埋め込んだYouTube動画に「動画は利用できません」と表示されるのはなぜですか?

埋め込んだ動画に「動画は利用できません」と表示されていても、YouTube上では再生されるのは、視聴と埋め込みが別々の権限設定になっているためです。YouTubeのヘルプやStack Overflow上の開発者による報告によると、所有者はYouTube上での視聴を許可しつつ、他のサイトでの再生をブロックすることが可能です。この設定は所有者側で行われるため、ご自身のサイト側から対処できる方法はありません。

YouTubeのチャンネル全体やプレイリストを1つのページに表示することはできますか?

ネイティブ埋め込みでは、1つのページにチャンネル全体やプレイリスト全体を表示することはできません。これは、各ネイティブ埋め込みが1つのiFrame内の単一の動画IDに紐付けられているためです。フィードプラグインは、単一の動画ではなくチャンネルやプレイリスト全体を指定することで、1つのブロック内でこれを実現します。そのため、複数の動画を表示したい場合、チャンネル所有者はフィードに切り替えるのです。

新しい動画を投稿すると、サイトは自動的に更新されますか?

ネイティブの埋め込みコードは自動的に更新されないため、新しい動画をアップロードした場合は、WordPressに戻って手動で新しい埋め込みコードを貼り付ける必要があります。フィードを自動的に更新するには、代わりに「YouTube Feed Pro」のようなプラグインを使用する必要があります。

YouTubeの埋め込みは、本当にWordPressの動作を遅くするのでしょうか?

はい、手動でのYouTube埋め込みはサイトの表示速度を著しく低下させますが、プラグインを使用すればこの問題を解決できます。 私のPingdomテストでは、4つの生の埋め込みコードを使用した場合、1ページのサイズが7.0 MB、読み込み時間が2.60秒となり、そのうちyoutube.comだけでページサイズの68.88%を占めていました。一方、スマートレイジーローディング機能を備えた「YouTube Feed Pro」を通じて同じ4つの動画を埋め込んだ場合、サイズは1.9 MB、読み込み時間は1.49秒にとどまりました。これは、訪問者がクリックしたときにのみフルプレイヤーが読み込まれるためです。

結論:複数の動画を公開する

ネイティブの埋め込み機能の真の限界は、単に速度だけではありません。1つの動画しか表示できず、更新されず、所有者が埋め込みをブロックすると何の通知もなく機能しなくなり、ページの容量を無駄に増大させてしまいます。フィードベースのアプローチなら、これら4つの問題を一度に解決できます。

チャンネルやプレイリスト全体を1つのブロックにまとめて表示し、新しい動画を自動的に追加し、ダウンタイム中も表示を維持し、読み込みも軽快です。

私自身のテストでもその違いを確認できましたし、皆さんも実際に試して確かめてみてください。生の埋め込みコードをフィードに切り替えただけで、あるページが「重くて遅い」状態から「軽くて速い」状態へと変わりました。どちらの場合も、掲載されている動画は同じ4本でした。

ページ上のコンテンツ量を増やしつつ、同時に占有スペースを小さくすることができます。

複数の動画を公開する準備はできましたか?今すぐ「Smash Balloon YouTube Feed Pro」を使ってフィードの表示を始めましょう。

手順ごとのガイドについては、WordPressサイトにYouTubeフィードを埋め込む方法に関するこのチュートリアルをご覧ください。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。