Spread the love

HTML <iframe> Tag

Today in this blog we look at HTML Iframe tags and use HTML Iframe tags to show a nest webpage (a webpage within a webpage). The HTML <iframe> Tag defines an inline frame, hence it is also called an inline frame.

Let us look at some examples of HTML <Iframe> Tags which are shown below with output one by one.

Example1:- Simple iframe Tag.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML iframe tag</title>
</head>
<body>
<h1>HTML Iframe Tag Example</h1>

<iframe src="https://www.myprograming.com/html-tag"></iframe>

</body>
</html>

Output:-

Example2:- Set Width and Height of iframe Tag.

Width and Height of iframe Tag two way here change first (Pixels) and second (Percentage) used.

Example With (Pixels)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML iframe tag</title>
</head>
<body>
<h1>HTML Iframe Tag Example</h1>

<iframe src="https://www.myprograming.com/html-tag" width="500px" height="500px"></iframe>

</body>
</html>

Output:-

Example With (Percentage)

Note:- If you want to change the width of the iframe tag to Percentage but you can’t set the height, you have to use pixels.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML iframe tag</title>
</head>
<body>
<h1>HTML Iframe Tag Example</h1>

<iframe src="https://www.myprograming.com/html-tag" width="50%" height="50%"></iframe>

</body>
</html>

Output:-

Attributes

How to upload video in the iframe?

we will need to Use https://www.youtube.com/embed/ to upload videos to iFrames.

Example:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML iframe tag</title>
</head>
<body>
<h1>HTML Iframe Tag Example</h1>

<iframe src="https://www.youtube.com/embed/Qprl6OVLmOA" width="50%" height="500px"></iframe>

</body>
</html>

Output:-


Spread the love

Related Posts

Leave a Reply

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