Skip to content
Related Articles

Related Articles

How to set fullscreen iframe?
  • Last Updated : 25 Sep, 2019

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:




<!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>


Output:

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




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


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :