<iframe allowfullscreen></iframe>

更新日
仕様 HTML Living Standard / Permissions Policy
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 無し

iframe要素allowfullscreen を追加すると、インラインフレームに埋め込まれる別オリジンのコンテンツが、requestFullscreen() を使用できるようになります。これにより、フレーム内のコンテンツが別オリジンにあったとしても、全画面モードで表示することが可能となります。

  • この指定は、外部の動画をインラインフレームで埋め込む際などに役立ちます。

<iframe src="https://example.com/demo.html" allowfullscreen></iframe>

属性
任意属性
allowfullscreen 全画面モードを許可 allowfullscreen 値は省略可能

requestFullscreen() との関係について

requestFullscreen() は、要素を全画面表示するためのメソッドです。

このメソッドが指定されたコンテンツをフレーム内に埋め込んだ場合、フレームとコンテンツが同一のオリジンであれば requestFullscreen() が機能しますが、異なるオリジンとなる場合には機能しなくなってしまいます。

iframe要素allowfullscreen を指定しておくと、フレームとコンテンツが異なるオリジンであったとしても、コンテンツは requestFullscreen() を実行できるようになります。


次の例では、別オリジンにあるフレーム内のコンテンツが、全画面で表示されることを許可しています。

<iframe src="https://example.com/demo.html" allowfullscreen></iframe>

allow属性との関係について

全画面モードの許可については、allowfullscreen属性の他にallow属性でも指定することができます。

allowfullscreen属性
全画面モードの許可・不許可だけを指定します。
allow属性
各種機能の許可・不許可を条件付きで指定します。(値に fullscreen を指定することで全画面モードの許可設定になる)

allowfullscreen属性の指定をallow属性に置き換えると次のようになります。(この2つは同一の指定を行っています)

allowfullscreen

allow="fullscreen *"
  • 上記のアスタリスク( * )は、許可の対象が全てのオリジンであることを意味します。

次のように、値に fullscreen を含むallow属性と、allowfullscreen属性が同時に指定された場合は、allow属性の指定が利用されることになります。

<iframe src="example.html" allow="fullscreen" allowfullscreen></iframe>

使用例

  • 以下の例では、別オリジン(tagindex.net)にあるコンテンツをフレーム内に埋め込んでいます。
allowfullscreen属性を指定した例

<iframe src="https://www.tagindex.net/example/iexample_fullscreen.html" allowfullscreen></iframe>

表示例
  • requestFullscreen() に対応しているブラウザでは、ボタンを押すと全画面で表示されます。
allowfullscreen属性を指定しない例

<iframe src="https://www.tagindex.net/example/iexample_fullscreen.html"></iframe>

表示例
  • requestFullscreen() に対応しているブラウザであっても、全画面では表示されません。(ボタンを押しても反応しません)