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.
Table of Contents
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:-
HTML Noframe Tag
HTML <noframes> Tag
HTML tag (not supported in HTML5).