How to set fullscreen iframe?
Last Updated :
12 Jul, 2025
To create a fullscreen <iframe> in HTML that covers the entire viewport, you can follow a few key steps involving HTML and CSS adjustments. The iframe element is commonly used to embed other web pages or documents within a webpage. Below is a detailed guide with examples of how to achieve this.
Steps to Make a Fullscreen <iframe>:
Reset margins and padding: Ensure that the page’s default margins and paddings are removed for the <html>, <body>, <div>, and <iframe> elements, to ensure the iframe takes up the full viewport.
html
{
overflow: auto;
}
html, body, div, iframe
{
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
Modify iframe behavior in CSS: Use CSS to transform the behavior of the iframe so that it stretches to cover the entire width and height of the screen.
iframe
{
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
Iframe properties for cross-browser compatibility: Add properties to the iframe tag to eliminate unwanted borders and ensure proper scrolling and sizing across different browsers.
<iframe src="myurl.in"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe >
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>full screen iframe</title>
<style type="text/css">
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<iframe src="https://en.wikipedia.org/wiki/HTML_element#Frames"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto">
</iframe>
</body>
</html>
Output:
Example 2: Using <frameset> (Deprecated Approach)
Using a <frameset> is another way to achieve fullscreen behavior, but it’s important to note that the <frameset> element is now deprecated in HTML5, so it's recommended to use the modern <iframe> approach instead. However, for reference, here’s how it works:
html
<!DOCTYPE html>
<html>
<head>
<title>full screen iframe</title>
</head>
<frameset rows="100%,*">
<frame src=
"https://en.wikipedia.org/wiki/HTML_element#Frames">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Output:
Using an <iframe> with CSS is the best approach to embed another document or webpage in fullscreen. This can enhance the user experience by displaying embedded content seamlessly, and it allows for full control over the styling and behavior of the iframe on your webpage.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Similar Reads
How to Insert an Iframe in React ? In this article, we are going to insert an Iframe in React JS. The iframe stands for the inline frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another do
1 min read
How to Create a Transparent iframe? The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page. Syntax<iframe src = "URL"></iframe>ApproachIn this approach we will use iframe tag to create the iframe and A transparent iframe can be made by setting its background to transpa
1 min read
How to make fullscreen toolbars using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making fullscreen toolbars using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesh
1 min read
How to create Responsive iFrames using CSS ? An iframe, or inline frame, is an HTML element used to embed another document or webpage within the current document. Responsive iframes can be achieved by defining the aspect ratio, which refers to the proportional relationship between the width and height of an element. To maintain the aspect rati
4 min read
HTML DOM exitFullscreen() Method The exitFullscreen() method requests the element which is currently in full-screen mode to be taken out of full-screen mode. If the element is not in full-screen mode, then nothing gets changed. The reverse of this method is requestFullscreen(). Syntax: HTMLElementObject.exitFullscreen() Parameters:
1 min read
How to Apply CSS Property To an iframe ? HTML iframe is used to embed external content such as videos, maps, or entire web pages into another webpage. The iframe stylings are used to set the width, height, border, ..., etc. of the iframe box. You can apply CSS styles to iframe in three different ways i.e. inline, internal and external CSS.
2 min read