How to change the width of an iframe to 100% using JavaScript ?

Given an HTML document containing an <iframe> element and the task is to change the width of the <iframe> element to 100% with the help of JavaScript. There are two methods to change the width of the iframe which are discussed below:

Method 1: This method uses id attribute of iframe with width property to change the width of <iframe> element. JavaScript’s code is written within the <script> tag.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html
     
<head
    <title
        How to change the width of an 
        iframe to 100% with JavaScript? 
    </title
</head
     
<body
    <center>
        <h1 style="color:green;"
            GeeksforGeeks  
        </h1
        <h3
            How to change the width of a <br>
            to 100% with JavaScript? 
        </h3
        <iframe id="iframe" height="100%" width="40%"
            src="https://www.youtube.com/embed/HzeK7g8cD0Y"
            frameborder="0" allowfullscreen> 
        </iframe>
  
        <br><br
        <button onclick="changewidth()"
            Click to change 
        </button
          
        <script
  
            // JavaScript code to change the 
            // width to 100% of <iframe
            function changewidth() { 
                var x = document.getElementById('iframe'); 
                x.style.width = "100%"; 
            
        </script
    </center>
</body>  
</html>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:
  • Method 2: This method uses the id attribute of the iframe with window.innerWidth property to change the width of <iframe> element. JavaScript code is written within the <script> tag.

    HTML

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html
         
    <head
        <title
            How to change the width of an 
            iframe to 100% with JavaScript? 
        </title
    </head
         
    <body
        <center>
            <h1 style="color:green;"
                GeeksforGeeks  
            </h1
            <h3
                How to change the width of a <br>
                to 100% with JavaScript? 
            </h3
            <iframe id="iframe" height="100%" width="40%"
                src="https://www.youtube.com/embed/HzeK7g8cD0Y"
                frameborder="0" allowfullscreen> 
            </iframe>
      
            <br><br
            <button onclick="changewidth()"
                Click to change 
            </button
              
            <script
                // JavaScript code to change the 
                // width to 100% of <iframe
                function changewidth() { 
                    var x = document.getElementById('iframe'); 
                    x.style.width = window.innerWidth; 
                
            </script
        </center>
    </body>  
    </html>

    chevron_right

    
    

    Output:

    • Before clicking the button:
    • After clicking the button:

    full-stack-img




    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.