How to set fullscreen iframe?

The iframe in HTML stands for 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 document within the current HTML document. For the fullscreen Iframe, you have to cover the entire viewport.

Steps to do for fullscreen Iframe:

  1. Reset page floating margins as 0px for html body, div, iframe tags:
    html 
    {
     overflow: auto;
    }
     
    html, body, div, iframe 
    {
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     border: none;
    }
    
  2. Transform iframe Tag behavior in CSS
    iframe 
    {
     display: block; 
     width: 100%; 
     border: none; 
     overflow-y: auto; 
     overflow-x: hidden;
    }
    
  3. Set iframe properties to resolve cross-browser issues:
    <iframe src="myurl.in"
        frameborder="0" 
        marginheight="0" 
        marginwidth="0" 
        width="100%" 
        height="100%" 
        scrolling="auto"></iframe >
    

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
            frameborder="0" 
            marginheight="0" 
            marginwidth="0" 
            width="100%" 
            height="100%" 
            scrolling="auto">
  </iframe>
  
</body>
  
</html>

chevron_right


Output:

Example 2: Using <frameset rows=”100%,*”>.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>full screen iframe</title>
</head>
<frameset rows="100%,*">
    <frame src=
        <noframes>
  
            <body>
  
            </body>
        </noframes>
</frameset>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.