HTML Iframes

HTML Iframe is used to display a webpage within a webpage. An HTML iframe embeds another document within the current document in a rectangular region. Iframe content and webpage content can interact with each other using Javascript.

IFrame Syntax:

An HTML iframe is defined with the <iframe> tag

<iframe src="URL of other document"></iframe>

Here, "src" attribute specifies the source of the web page, you need to specify the web address(URL) of the webpage.

Set Iframe Width and Height:

You can set the width and height of iframe by using "width" and "height" attributes. The width and height can be specified in pixels or in percentage. for ex. 50%, 60% etc.

Example
<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes Height and Width example</h2>    
<p>Use the height and width attributes to specify the size of the iframe:</p>    
<iframe src="https://www.tutorialsmint.com/" height="400" width="400"></iframe>    
</body>    
</html>

How to Remove the border of iframe:

By default, an iframe contains a border around it. You can remove the border by using <style> attribute and css border property.

Example
<!DOCTYPE html>    
<html>    
<body>    
<h2>Remove the Iframe Border</h2>    
<p>This iframe example doesnt have any border</p>     
<iframe src="https://www.tutorialsmint.com/" style="border:none;"></iframe>    
</body>    
</html>

How to embed YouTube video using iframe on webpage:

You can also add a youtube video on your webpage using the <iframe> tag. The attached video will played at your webpage and you can also set height, width, autoplay and many more properties for the video.

Go to the youtube select video which you want to embed click on share icon under the video, click on embed <> option and copy the HTML code, paste the code in your HTML file. Here you can change the height width of the iframe.

Example
<iframe width="600" height="500" src="https://www.youtube.com/embed/JHq3pL4cdy4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="padding:20px;"></iframe>