<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>
使用例
<iframe src="https://www.example.com/example/fullscreen.html" allowfullscreen></iframe>