HTML Iframes

By | January 12, 2020

HTML <iframe> is also called inline frame because <iframe> is used in HTML for nested web page nested web page means another web page inside a page. A sheet is <iframe> it sets the second page in a rectangular form within the current web page. Let HTML iframe be defined with <iframe> tags. HTML<iframe> has a starting tag and an end tag. sorts of.

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

The URL of another web page is given in src=”” attribute.

<iframe src="About.html"></iframe>

Width and Height of iframe:-

We can set the width and height of HTML <iframe>. The default end of height and width is in Pixels but you can also set it in percents.

Example:-

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h1>HTML Iframe</h1>

<iframe src="https://learnhtmlcoding.com" width="300" height="200"></iframe>

</body>
</html>

Output:-

ifame

If you want to set the width and height of HTML <iframe> in the present, then this is how.


<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h1>HTML Iframe</h1>

<iframe src="https://learnhtmlcoding.com" width="60%" height="40%"></iframe>

</body>
</html>

If from style CSS of <iframe> we will do something like this.


<!DOCTYPE html>
<html>

<body>
<h1>HTML Iframe</h1>

<iframe src="https://learnhtmlcoding.com" style="width: 300px;height: 200px;"></iframe>

</body>
</html>

Or we can also…

<!DOCTYPE html>
<html>
<head>
	<style>
		iframe{
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
<h1>HTML Iframe</h1>

<iframe src="https://learnhtmlcoding.com"></iframe>

</body>
</html>

Output:-

ifame

Border CSS of iframe:-

In <iframe> we can add and remove the border.


<!DOCTYPE html>
<html>
<head>
	<style>
		iframe{
			width: 300px;
			height: 200px;
			border:3px solid red;
		}
	</style>
</head>
<body>
<h1>HTML Iframe</h1>

<iframe src="https://learnhtmlcoding.com"></iframe>

</body>
</html>

Output:-

iframe border

iframe as Link target:-

Hyperlink can be targeted to <iframe>. For this, first one has to be given a name, then <iframe> is linked by that name, after clicking on the linked element, we go to <iframe> .


<!DOCTYPE html>
<html>

<body>
<h1>HTML Iframe</h1>

<iframe src="new.html" width="300px" height="40%" name="iframe_name"></iframe>

<p><a href="https://learnhtmlcoding.com" target="iframe_name">learnhtmlcoding.com</a></p>

</body>
</html>

Output:-

iframe

You can check by putting the above code in your editor.

Embed Youtube video using iframe:-

In this we will learn how we can set a YouTube video in our web page, for this we will use <iframe>. To add YouTube video to your web page, first go to the YouTube video you want to embed and then click on share, after clicking, you will get the embedded HTML code which you paste in your HTML and you height Set end width.


<!DOCTYPE html>
<html>

<body>
<h1>Embed Youtube video using iframe</h1>
<iframe width="300" height="200" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

Output:-

iframe video
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *