Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set full-screen iframe with height 100% in JavaScript?
Setting an iframe to full-screen with 100% height is a common requirement in web development. This can be achieved using JavaScript's style.height property along with additional CSS properties to create a proper full-screen experience.
The style.height property sets or returns the height of an HTML element as a string value. When combined with other style properties like position: fixed and proper positioning, it creates a true full-screen iframe overlay.
Syntax
element.style.height = "100%"; element.style.width = "100%"; element.style.position = "fixed"; element.style.top = "0"; element.style.left = "0"; element.style.zIndex = "9999";
Parameters
height ? Sets the height of the iframe element (100% for full screen)
width ? Sets the width of the iframe element (100% for full screen)
position ? Uses "fixed" to position relative to the viewport
zIndex ? Ensures the iframe appears above other content
Method 1: Using getElementById()
This method targets a specific iframe by its ID and applies full-screen styling:
<html>
<body>
<h2>Full-Screen Iframe with JavaScript</h2>
<iframe id="videoFrame" width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen>
</iframe>
<br><br>
<button onclick="makeFullScreen()">Go Full Screen</button>
<button onclick="exitFullScreen()">Exit Full Screen</button>
<script>
function makeFullScreen() {
var iframe = document.getElementById('videoFrame');
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.zIndex = '9999';
iframe.style.border = 'none';
}
function exitFullScreen() {
var iframe = document.getElementById('videoFrame');
iframe.style.position = 'static';
iframe.style.width = '560px';
iframe.style.height = '315px';
iframe.style.zIndex = 'auto';
}
</script>
</body>
</html>
Method 2: Using querySelector()
This method uses querySelector() to select and modify iframe properties:
<html>
<body>
<h2>Full-Screen Iframe using querySelector</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen>
</iframe>
<br><br>
<button onclick="toggleFullScreen()">Toggle Full Screen</button>
<script>
let isFullScreen = false;
function toggleFullScreen() {
const iframe = document.querySelector('iframe');
if (!isFullScreen) {
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.zIndex = '9999';
iframe.style.border = 'none';
isFullScreen = true;
} else {
iframe.style.position = 'static';
iframe.style.width = '560px';
iframe.style.height = '315px';
iframe.style.zIndex = 'auto';
isFullScreen = false;
}
}
</script>
</body>
</html>
Comparison
| Method | Selector | Best For | Browser Support |
|---|---|---|---|
| getElementById() | Targets specific ID | Single iframe with known ID | All browsers |
| querySelector() | CSS selector syntax | Flexible element selection | Modern browsers |
Key Points
position: fixed is essential for true full-screen behavior
zIndex ensures the iframe appears above other content
Always provide a way to exit full-screen mode for better user experience
Consider adding ESC key functionality to exit full-screen
Conclusion
Creating full-screen iframes requires setting multiple CSS properties through JavaScript, including height, width, position, and z-index. Both getElementById() and querySelector() methods work effectively, with the choice depending on your specific selection needs.
4K+ Views
