JavaScriptでiframeをフルスクリーン表示に設定する方法
Webページに埋め込んだiframe（インラインフレーム）を、ボタン操作ひとつで画面いっぱいに表示できたら便利ですよね。JavaScriptを使えば、CSSクラスの付け替えだけでこの動作をシンプルに実装できます。
サンプルコード
以下は、ボタンをクリックするとiframeが全画面サイズに切り替わるサンプルです。iframeに対して幅「100vw」・高さ「100vh」を指定したCSSクラスを適用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iframeのフルスクリーン表示</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.fullScreen {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<h1>iframeを全画面表示にする</h1>
<iframe class="frame" src="https://www.wikipedia.com" width="300" height="200"></iframe>
<button class="Btn" style="margin: 15px;">全画面表示</button>
<h3>上のボタンをクリックすると、iframeが全画面表示に切り替わります</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let frameEle = document.querySelector(".frame");
BtnEle.addEventListener("click", () => {
frameEle.className = "fullScreen";
});
</script>
</body>
</html>
コードの解説
- .fullScreenクラス …
width: 100vw;とheight: 100vh;を指定することで、ビューポート（ブラウザの表示領域）の幅・高さいっぱいにiframeを拡大します。 - document.querySelector() … ボタン要素（.Btn）とiframe要素（.frame）をそれぞれ取得しています。
- addEventListener("click", ...) … ボタンがクリックされたタイミングで、iframeのclassNameを「fullScreen」に書き換え、スタイルを適用します。
なお、ブラウザのアドレスバーなどのUIも含めて完全に全画面化したい場合は、標準のFullscreen APIであるelement.requestFullscreen()メソッドを使う方法もあります。こちらを利用すれば、Escキーで解除できる本格的な全画面表示が実現可能です。
実行結果
ページを読み込むと、まず300×200pxのサイズでiframe内にWikipediaが表示されます。
続いて、「全画面表示」ボタンをクリックしてみましょう。
クリック後はiframeが画面全体に広がり、埋め込み先のページがまるごと表示されます。
-
Windows 11/10でフルスクリーンが機能しないときの対処法|ゲーム・動画再生のトラブルを解決する4つの方法
アプリケーションの中には、フルスクリーンで実行してこそ本来の使い勝手を発揮できるものがあります。映画を視聴しているときやゲームをプレイしているときは、画面全体を使いたいはずです。しかし、Windows 11/10のユーザーからは、「フルスクリーンに切り替わらない」「フルスクリーンになっても画面の一部しか表示されない」「最大化されたウィンドウになるだけ」といった、さまざまなフルスクリーンの不具合を報告する声が寄せられています。 本記事では、こうしたWindowsのフルスクリーン問題を解決するためのトラブルシューティングの手順を詳しく解説します。 Windows 11/10のフルスクリーン問題への
-
Windows 10で全画面表示にする8つの方法【ゲーム・アプリ対応】
ゲームに没頭して、邪魔されることなく集中できるのは何よりの楽しみです。全画面モードを活用すれば、気が散る要素が減り、より広い視野でゲームを楽しめます。ほとんどのゲームやアプリは全画面モードで利用できますが、中にはうまく切り替えられないものもあります。この記事では、Windows 10で全画面表示にするさまざまな方法を詳しく解説します。ノートパソコンでの全画面設定方法をマスターして、Windows 10の体験をさらに快適にしましょう。 Windows 10で全画面表示にする方法 この記事では、PCで全画面表示にするために考えられるすべての手順を紹介します。以下の方法を参考に、Windows 1