はじめに
自作のwebページに、youtubeプレーヤーを作成してそこの全画面表示ボタンをクリックすると、正常に全画面表示します。
しかし、自作以外のwebページに、自サイトのyoutubeプレーヤーページをアペンドして表示されたプレーヤーの全画面表示ボタンをクリックしても、次のメッセージが表示されて、全画面表示ができません。
「全画面表示はご利用いただけません。 詳細」詳細はリンクです。
自サイトのyoutubeプレーヤーページをアペンドして、且つ、そこの全画面表示ボタンをクリックして全画面表示ができるのは、親ページとアペンドしたyoutubeプレーヤーのページが同一オリジンの場合です。
このオリジンが異なると、たとえ、ドメインが同じでも、サブドメインが異なると動作しません。
この全画面表示を異なるオリジンでも動作させようと四苦八苦しましたが、できませんでした。
テストケース
全画面表示する例
(1)イラスト図
(2)スクリーンショット
実際のページ画面です。
右中央の小さい画面がアペンドで追加したTinyPlayerです。その中の全画面表示ボタンをホバーすると、「全画面(f)」という文字がポップアップします。この文字が表示されると、正常に全画面でプレーヤーが表示されます。逆に、表示できない場合は、「全画面表示はご利用いただけません。 詳細」という文字がポップアップされます。
(注)このページのアドレスバーは、サブドメインがsimplestになっていますが、イラスト図のfavoriteに置き換えたものとしてご理解してください。
(3)スクリーンショット2
以下は、異なるオリジンのケースです。アペンドしたページの全画面表示ボタンをクリックすると、以下のメッセージが表示されます。
「全画面表示はご利用いただけません。 詳細」
実際に動作させて確認する場合
この場合は、プラグインが必要になります。
以下のリンクからダウンロードして、Chromeの拡張機能でインストールすれば、動作します。
プラグインのダウンロード
動作手順
(1)以下のリンクをクリックすると、youtubeプレーヤーのページが表示されます。
(2)そこで、クェリー検索ボタンの右に「美空ひばり みだり髪」の文字があります。そこで、altキーを押しながら、美空ひばりの文字をマウスでセレクトし、altキーを離すと、アペンドで追加したyoutubeプレーヤー画面が表示されます。
(3)その画面の中のYouTubeボタンの右にある四角いボタンが全画面表示ボタンです。ここをホバーすると、「全画面 (f)」という文字が表示されます。この文字が表示されると、正常に全画面表示することができます。
実行結果
全画面ボタンをクリックすると、全画面表示することが確認できます。これは、親ページのサブドメイン、ドメインがアペンドで表示したページのサブドメイン、ドメインと同一オリジンのときです。サブドメインが異なると全画面表示ができません。
これは、youtubeAPI側で、セキュリティチェックしているためと思われます。
サブドメインの組み合わせでの全画面表示結果
(1)favorite.tecoyan.netのページとfavorite.tecoyan.netのtinyPlayerのアペンドページ
いずれも成功(同一オリジン)
(2)favorite.tecoyan.netのページとsimplest.tecoyan.netのtinyPlayerのアペンドページ
親ページのみ成功(異なるオリジン)
(3)simplest.tecoyan.netのページとsimplest.tecoyan.netのtinyPlayerのアペンドページ
いずれも成功(同一オリジン)
(4)simplest.tecoyan.netのページとfavorite.tecoyan.netのtinyPlayerのアペンドページ
親ページのみ成功(異なるオリジン)
本来のやりたいこと
以下の画面をご覧願います。もともとは、この画面のようなケースで、Qiitaやブログで、altキーを押しながら、文字列を選択して離すと、この小さなプレーヤーが表示され、選択した文字列をキーにして、youtubeを検索し、そのリストを再生することです。その時に、プレーヤーの全画面表示ボタンをクリックすると全画面でプレーヤーが動作することです。しかし、異なるオリジンのため、現行は、全画面表示できません。
AIアシスタントで確認したこと(引用)
ゲストさんのアイコン
異なるドメインでのyoutubeプレーヤーを全画面表示するには
AIが回答を生成中AIアシスタント
はい、承知いたしました。 異なるドメインでYouTubeプレーヤーを全画面表示する方法について説明します。
🎬 異なるドメインでのYouTube全画面表示について
YouTubeプレーヤーをWebページに埋め込んだ際に、そのページとYouTubeプレーヤーが異なるドメインにあると、通常は全画面表示ができません。これはYouTube API側のセキュリティチェックによるものです。たとえドメインが同じでも、サブドメインが異なると動作しないことがあります。
💡 全画面表示を実現するためのヒント
一般的に、YouTube動画を全画面表示するには以下の方法があります。
提供されている全画面ボタンを利用する YouTubeの動画プレーヤーには、画面右下に全画面表示ボタンがあります。このボタンをクリックすることで、全画面表示に切り替えられます。
URLを変更して埋め込む YouTube動画のURLで「watch?v=」を「embed/」に変更すると、全画面表示されるようになります。たとえば、https://www.youtube.com/watch?v=ビデオID を https://www.youtube.com/embed/ビデオID のように変更します。
⚙️ その他の関連情報
WebサイトにYouTube動画を埋め込む際は、YouTube iframe Player APIというGoogle公式のAPIを利用すると、より高度な設定が可能です。これにより、自動再生やループ再生、コントロールバーの非表示といった機能を実現できます。
YouTubeの全画面表示モードで問題が発生した場合、ブラウザの設定が影響している可能性があります。Firefoxなどのブラウザでは、サイトごとに全画面表示の許可・拒否を設定できます。
あとがき
今回は、ひとつのページに異なるドメインのyoutubeプレーヤーをふたつ表示したときのケースです。その場合は、親ページのyoutubeプレーヤーは全画面表示できますが、アペンドで追加したもう一方のyoutubeプレーヤーの全画面表示ができないことです。
何とか、二つ目のyoutubeプレーヤーでも全画面表示ができないかと試行錯誤しましたが、ドメインが異なるとだめでした。ドメインが同じであれば、二つのプレーヤーともに全画面表示ができました。
これまでの、浅薄な知識から、異なるドメインで全画面表示すると、何が問題になると思われるのかという視点で考えてみました。おそらくそれは、親ページの画面が、異なるドメインのページで全画面ボタンをクリックするとがそのページに画面が乗っ取られるからかと考えました。親がブログページの場合、別のページの画面に完全に入れ替わってしまうからです。そのページがyoutubeの再生ページであれば、問題はないのですが、もし、悪意のあるページの場合は、そのページに画面が入れ替わってしまうと同じ事になります。
そのような恐れがあるから、youtubeAPIの全画面ボタンは、異なるドメインの場合は禁止にしているのかと考えました。
どなたか、異なるドメインでも全画面表示ができるのか、わかる方がいたら、その方法を教えていただけると助かります。