Back to: HTML Tutorials
Iframes in HTML with Examples
In this article, I will discuss Iframes in HTML with Examples. Please read our previous article, discussing CSS in HTML with Examples. At the end of this article, you will learn everything about HTML Iframes with Examples.
HTML Iframes
An HTML iframe is a container for displaying a web page within a web page. The < iframe> tag creates a rectangular area within an HTML document where the browser can show a separate document with scrollbars and borders.
The src attribute specifies the page URL that will be displayed in the inline frame. JavaScript allows the website’s content and the iframe’s content to interact with each other.
Iframe Syntax in HTML
The below syntax is used to add iframes to websites.
<iframe src=”url” title=”iframe_title”></iframe>
Iframe – Set Height and Width
We can use the Html width and height attributes to define the iframe’s size.:
<!DOCTYPE html> <html> <body> <br> <iframe style="border:none;background-color:lightblue;" width="500" height="300" title="Iframe Example"></iframe> </body> </html>
Output:
The above example will create an iframe with a width of 500 px and a height of 300 px.
Iframe – Border
An iframe has a border by default. We can remove the iframe border, change the style of the border, or adjust the border’s size to suit our needs.
To remove border
<!DOCTYPE html> <html> <body> <br> <iframe style="border:none;background-color:slateblue;" width="500" height="300" title="Iframe Example"></iframe> </body> </html>
Output:
To add style
<!DOCTYPE html> <html> <body> <br> <iframe style="border:5px solid orange;background-color:slateblue;" width="500" height="300" title="Iframe Example"></iframe> </body> </html>
Output:
Iframe – Target for a Link
An iframe can be used as the link’s target frame. The link’s target attribute must correspond to the iframe’s name attribute. In the below example, we have given the target attribute value as iframe_target. The iframe name attribute value and target attribute value must be the same. Then only it will work correctly; otherwise it won’t work.
<!DOCTYPE html> <html> <body> <br> <iframe style="border:1px solid red;" width="500" height="300" name="iframe_target" title="Iframe Example"></iframe> <p><a href="https://www.dotnettutorials.net" target="iframe_target">Dot Net Tutorials</a></p> </body> </html>
Output:
Before clicking on the link, you can see that the frame is empty. The webpage will open inside the empty iframe when we click on the link.
Embed YouTube video using iframe in HTML
You can also embed a YouTube video on your website using the <iframe> tag.
<!DOCTYPE html> <html> <body> <br> <iframe width="560" height="315" src="https://www.youtube.com/embed/35npVaFGHMY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body> </html>
Output:
Embed Google map using iframe in HTML
You can also embed a Google map on your website using the <iframe> tag.
<!DOCTYPE html> <html> <body> <br> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.64332790065!2d72.74109997462705!3d19.08252232039457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1636379247018!5m2!1sen!2sin" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </body> </html>
Output:
In the next article, I will discuss Block-Level and Inline Elements in HTML with Examples. In this article, I try to explain Iframes in HTML with Examples, and I hope you enjoy this HTML Iframes with Examples article.