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

Last Updated : 18 Jan, 2023

In this article, we are 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 the id attribute of iframe with width property to change the width of <iframe> element. JavaScript's code is written within the <script> tag.

HTML

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

Output:

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

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

Output:

How to get HTML content of an iFrame using JavaScript ?

SHUBHAMSINGH10

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?