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:

Change the width of an iframe to 100%

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:

Change the width of an iframe to 100%

How to get the Width of Scroll bar using JavaScript?

SHUBHAMSINGH10

Improve

Article Tags :

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

HTML

HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?