HTML Iframes

HTML Iframes: <iframe> tag used to display the nested webpages (i.e. a webpage within a webpage). And we can define the iframe by enclosing them as <iframe>.  Moreover, the HTML iframes are embedded in another document within the current HTML document in the rectangular region.



HTML Iframes

The webpage content and iframes content can interact with each other using javascript.

Syntax:<iframe src=”URL”></iframe>

src” attribute specifies the web address (URL) of the inline frame page.

HTML Iframe Height and Width

You can set the height and width in HTML Iframe by using “height” and “width” attributes. But default the values of the attributes are specified in pixels but you can also set them in percentage format i.e. 50%, 60%, etc.,

Example: Pixels

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes example</h2>    
<p>Use the height and width attributes to specify the size of the iframe:</p>    
<iframe src="https://tutorials.freshersnow.com/" height="300" width="400"></iframe>    
</body>    
</html>

Example: Percentage

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes</h2>    
<p>You can use the height and width attributes to specify the size of the iframe:</p>    
<iframe src="https://tutorials.freshersnow.com/" height="50%" width="70%"></iframe>    
</body>    
</html>

Example: You can also use CSS to set height and width attributes

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes</h2>    
<p>Use the CSS height and width properties to specify the size of the iframe:</p>    
<iframe src="https://tutorials.freshersnow.com/" style="height:300px;width:400px"></iframe>    
</body>    
</html>

Remove Border of Iframe

You can remove the border by using <style> attribute and CSS property.

Example:

<!DOCTYPE html>    
<html>    
<body>    
<h2>Remove the Iframe Border</h2>    
<p>This iframe example doesn't have any border</p>     
<iframe src="https://tutorials.freshersnow.com/" style="border:none;"></iframe>    
</body>    
</html>

Change size, Color & Style of Iframe Border

Example:

<!DOCTYPE html>    
<html>    
<body>    
<h2>Custom Iframe Border</h2>    
<iframe src="https://tutorials.freshersnow.com/" style="border:2px solid tomato;"></iframe>    
</body>    
</html>

Attributes of Iframes

Attribute Name Value Description
allowfullscreen If it is true then the frame will open in fullscreen
height pixels Defines the height of the embedded iframe whereas the default height is 150px
name text gives the name to iframe
frameborder 1 (or) 0 defines whether iframe should have a border (or) not
width pixels defines the width of the embedded frame and default width is 300px
src URL used to give pathname (or) file name which content to be loaded into the iframe
sandbox tm_wday used to apply extra restrictions for the content of the frame
srcdoc used to show the HTML content in the inline iframe. And also overrides the src attribute
scrolling indicates that the browser should provide a scroll bar for the iframe (or) not