Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set full-screen iframe with height 100% in JavaScript?
The style.height property is used to set the full-screen iframe with 100% height, and it returns the string value, which represents the height of an element. Auto is the default value of these height property. Here we use the onclick event to make changes effective after clicking the button.
The onclick event occurs only when a user clicks the elements and it is a purely JavaScript attribute. Whenever you click on the onclick event it does some actions like displaying a message or redirects the user another page. The onclick event must be used very less in the website, because it may create the confuse to the users. So, use these event very wisely.
getElementById() produces an object of element which represents the element whose id attribute matches the provided string. Because element IDs must be unique if supplied, they're a convenient method to rapidly retrieve a single element.
In this article, we are going to learn how to set the full-screen iframe with height 100% using the JavaScript.
Syntax
The following is the syntax for the setting the full-screen iframe with height 100% after clicking the button using the JavaScript −
document.getElementById('id').style.backgroundColor = 'auto | length | %| initial | inherit';
Parameter
height − Used to set or returns the height of an element
getElementById − To read and edit the specific HTML Elements.
Length − It defines the height in the units of length
% − Used to define the height in the percentage of the elements of parent
Steps
Follow the below-given steps to set the full-screen iframe with height 100% after clicking the button in JavaScript −
Step 1 − Under the body section, we defined the heading, iframe, button and script elements.
Step 2 − Let’s define the style for the iframe id of the HTML Document which is going to set height for the iframe after clicking the button. For an iframe element, we defined the height, and width.
Step 3 − For the button element, the heightChanging() method is defined. Using this method height will be changed when we press the button.
Step 4 − In heightChanging() method, the id, and height is mentioned clearly for which method functionality should be performed.
Step 5 − The style.height is the HTML DOM style property used to set the height of the iframe.
Step 6 − After clicking the button, the onClick event function is triggers and it changes the height to 100%.
Example
In this example, we are going to set the full-screen iframe with height 100% after clicking the button with the help of JavaScript.
<html>
<body>
<h2>Setting the full-screen iframe with height 100% using the Javascript</h2>
<iframe id="iframe" width="650" height="315" src="https://www.youtube.com/embed/B8VDIyNX4Ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>
<button onclick ="heightChanging()">
Press Here to Change
</button>
<script>
//function to change the height of iframe using the Javascript
function heightChanging() {
var video = document.getElementById('iframe');
video.style.height = window.innerHeight;
}
</script>
</body>
</html>
Example
In this example, we use style height property to set the height 100% of iframe. To make the changes effective we use onclick event attribute and querySelector method.
<html>
<body>
<h2>Setting the full-screen iframe with height 100% using the Javascript</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/K5mgs1f-TFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>
<button onclick ="heightChange()">
Click Here to Change Height
</button>
<script>
//function to change the height of iframe using the Javascript
function heightChange() {
document.querySelector('iframe').style.width = "100%";
document.querySelector('iframe').style.height = "100%";
document.querySelector('iframe').style.top = "0";
document.querySelector('iframe').style.left = "0";
document.querySelector('iframe').style.position = "fixed";
document.querySelector('iframe').style.zIndex = "8888";
}
</script>
</body>
</html>
In the above example, we used the “querySelector” to set all the elements of iframe in the HMTL document. The getElementById(), and Document.querySelector(),is only accessible on the global document object. To add functionality to a web page, JavaScript code is employed. In this case, we utilized the arrow function with the "id" parameter. We may also use style properties to set height to 100% for iframe. These are easy methods to use, and we display all code with an example of style.
Conclusion
In this article, we have demonstrated how to set the full-screen iframe with height 100% along with examples. We have seen the two different examples here, we used the style height property for setting the height 100% of iframe. In the first example, we used the ‘style height’ property for setting the full-screen iframe with the height 100%. For the second example, we used the style height property and querySelector method to set the elements like height, width, left, top etc.,
3K+ Views
