How to change the width of an iframe to 100% using JavaScript ? Last Updated : 18 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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% Comment More infoAdvertise with us Next Article How to get the Width of Scroll bar using JavaScript? S SHUBHAMSINGH10 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth 3 min read How to get HTML content of an iFrame using JavaScript ? The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document. Code snippet:function getIframeContent(frameId) { let frameObj = document.getElementById(frameId); let frameContent = frameObj. contentWindow.document.body.innerHTML; alert("frame c 1 min read How to find the width of a div using vanilla JavaScript? To measure the width of a div element we will utilize the offsetWidth property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels. Below are the different approaches to finding the width of a div using vanilla JavaScrip 3 min read How to set full-screen iframe with height 100% in JavaScript? To set a full-screen iframe with a height of 100% in JavaScript, it’s essential to manipulate the iframe's properties and styles dynamically. This process involves adjusting the iframe's dimensions to cover the entire viewport.Below are the approaches to set full-screen iframe:Table of ContentUsing 2 min read How to calculate Width and Height of the Window using JavaScript ? In this article, we will know to calculate the width & the height of the window using Javascript. Given an HTML document that is running on a Window & we need to find the height and width of the window. The Window innerWidth property is used for returning the width of a window’s content area 2 min read How to navigate URL in an iframe with JavaScript ? To navigate the URL in an iframe with JavaScript, we have to set the src attribute or return the value of the src attribute in an iframe element. The src attribute defines the URL of the document that can be shown in an iframe.Syntax:document.getElementById("selector").src = "URL";URL values: Absolu 1 min read Like