HTML Iframes


January 19, 2022, Learn eTutorial
1281

In this HTML tutorial, you will learn all about the iframe in HTML. We will also discuss the attributes used in the iframe tag in HTML.

What is the use of the Iframe tag in HTML?

Using an iframe or inline frame, other items, such as other web pages, maybe shown within a web page. An iframe is essentially somewhat a web browser within a web browser. Furthermore, the material within an iframe exists independently of the surrounding components.


<iframe src="URL"></iframe>
 

The src property specifies a URL that links to the location of an external object or web page.


<!DOCTYPE html> 
<html> 
<body> 
<h2>HTML Iframes</h2> 
<iframe src="demo.html">
</iframe> 
</body> 
</html>

HTML - Introduction

Using the Width and Height attribute of an iFrame tag in HTML

The "width" and "height" parameters can be used to specify the width and height of an iframe. The values of the characteristics are stated in pixels by default, but you may optionally specify them in percent. For example, 50%, 60%, and so on.


<!DOCTYPE html> 
<html> 
<body> 
<h2>HTML Iframes</h2> 
<iframe src="demo.html" height = “500” width = “500”></iframe>  
</iframe> 
</body> 
</html>

HTML - Introduction

Removing Default Border of Iframe in HTML

A border surrounds the iframe by default. The CSS border property is the best solution if you want to update or remove the iframe boundaries.


<!DOCTYPE html> 
<html> 
<body> 
<h2>HTML Iframes</h2> 
<iframe src="demo.html" height = “500” width = “500” ></iframe> 
</iframe> 
</body> 
</html>

HTML - Introduction

Using an iFrame as Link Target

An iframe can also be used to target the hyperlinks. The name property may be used to give an iframe a name. This means that if you click a link with that name as the target property, the connected resource will open in that iframe.


<!DOCTYPE html> 
<html> 
<body> 
<h2>HTML Iframes</h2>  <iframe src="" height = "200" width = "500" name="myFrame" 
<p><a href="demo.html" target="myFrame">Open frame</a></p>
</iframe> 
</body> 
</html>

Before the clicking on the link

HTML - Introduction

After clicking on the link

HTML - Introduction

Embedding The YouTube into the HTML Page

We can embed the YouTube video into the HTML by using the iframe.


<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jlCq_xqC5fg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

HTML - Introduction