TwitterのYouTube埋め込みが「全画面表示はご利用いただけません」エラーで全画面表示できない問題について

Twitterでは、ツイートに含まれたyoutubeのURLが展開されて、Twitterのサイト内に埋め込み表示されます。

これをPC版のChromeから開いて全画面表示のボタンを押してみると、どういうわけか、全画面表示できません。

全画面表示はご利用いただけません。 詳細

「詳細」に全画面表示できない理由が書いてあると思いきや、リンク先は全画面表示の使い方のヘルプページであり、何の参考にもなりませんでした。

ちなみに、YouTubeをEnglish (US)に切り替えた場合は以下のメッセージになりました：

Full screen is unavailable. Lean More

Chrome以外のブラウザでも、同様に全画面に切り替えての再生はできませんでした。

今回Twitterの埋め込みYouTubeは全画面再生できませんでしたが、その他のサイトでは出来るサイトもあり、サイトによって、再生できる場合とできない場合があることが分かりました。

ここまでいろいろ過去の事例を見つつ、今回ブラウザにかかわらず発生＆サイトには依る、というあたりを加味すると、このフルスクリーンが利用できない問題は、Twitter社側が全画面表示できない埋め込み方をしてしまっていると考えられそうでした。

さらに続けて、Fullscreen APIについてのページを読んでみると、以下の記載がありました：

フルスクリーンの要求が失敗する場合
フルスクリーンモードに移行できることは保証されていません。例えば <iframe> 要素は、その内容物がフルスクリーンモードで表示されるのを許可することをオプトインするための allowfullscreen 属性を持っています。加えて windowed モードのプラグインなど、一部のコンテンツはフルスクリーンモードで表示することができません。フルスクリーンモードで表示できない要素 (またはそのような要素の親・子孫要素) はフルスクリーン化しようとしても動作しません。その代わりに、フルスクリーン化を要求された要素は fullscreenerror イベントを受け取ります。フルスクリーンの要求が失敗した場合に Firefox は、なぜ失敗したかを示すエラーメッセージを Web コンソールに記録します。一方 Chrome や新しい Opera は、そのような警告を生成しません。 （引用元）

※↑つまり、allowfullscreen属性のないiframeからは全画面表示できない

しかし、allowfullscreenタグはちゃんとiframeタグについていました（実はこれが誤解）。

Firefoxには、次のエラーが出ていました。

Content Security Policy: ‘frame-ancestors’ ディレクティブにより ‘x-frame-options’ を無視します。 (不明)
Content Security Policy: ディレクティブ ‘frame-src’ は推奨されません。代わりにディレクティブ ‘child-src’ を使用してください。

Chromeには、次のエラーが出ています。

cast_sender.js:76 Uncaught DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' flag.
at V.P (chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js:76:87)
at Object.chrome.cast.P (chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js:91:165)
at g.QI.g.h.init (https://www.youtube.com/yts/jsbin/player-vflOdyxa4/ja_JP/base.js:6010:519)
at vAa (https://www.youtube.com/yts/jsbin/player-vflOdyxa4/ja_JP/remote.js:34:60)
at wAa (https://www.youtube.com/yts/jsbin/player-vflOdyxa4/ja_JP/remote.js:35:8)
at window.chrome.window.chrome.cast.window.chrome.cast.isAvailable.window.__onGCastApiAvailable (https://www.youtube.com/yts/jsbin/player-vflOdyxa4/ja_JP/remote.js:35:374)
at Object.chrome.cast.ea (chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js:94:152)
at chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js:94:204
at chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js:94:326

ただ、これ自体は関係ありそうに見えて、見たところ直接的な関係はなさそうでした。

さらにいろいろDOM比較していて気が付いたのですが、Twitterのiframe埋め込みは２重になっており、最初に「twitter.com」に「twitter.com/i/cards/...」というカードをiframeで埋め込んで、さらにその中に「www.youtube.com/embed/...」を埋め込んでいて、allowfullscreenが付いていたのは、１層目のiframeタグで、www.youtube.comのiframeにはallowfullscreenが付いていませんでした。

<iframe data-src="https://www.youtube.com/embed/0000" frameborder="0" scrolling="no" allowtransparency="true" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" src="https://www.youtube.com/embed/0000?autoplay=1&amp;auto_play=true"></iframe>

「allowfullscreen」でdomを検索するとちゃんと発見できて、しかもDeveloper ToolsのElementsタブでそのiframeにマウスオーバーしてもちょうどそれっぽい領域が埋め込みPlayerと重なるので（よく見ればおかしいことが分かる）、「allowfullscreenが付いている」と勘違いしてしまっていたようです。

IEで確認した際のiframeタグ（２層目）がこちら：

そこで、そのiframeにこちらでallowfullscreenを付与してあげることで、全画面表示できるようになりました。

しかし結局のところ、これはTwitter社が全画面表示をできない指定で埋め込んでいることが原因であるため、Twitter社側の対応待ちとなりそうです（これが不具合であれば。もしこれが広告の都合など、全画面表示を利用させないことを意図したものであれば、今後も全画面表示ができない状態が続きそうです）。