Working with Iframes in HTML
Forms and Iframes
In this lesson, we will learn how to create and use iframe in HTML document.
What is Iframe in HTML
An iframe is an HTML tag used to embed one HTML document inside another. The name iframe stands for inline frame. An iframe can be used to display content from another website, such as a video or a map, without the need to redirect the user to that website.
How does an iframe tag work in HTML
When you include an iframe tag in your HTML code, the browser creates a separate window inside the web page. This window is known as the iframe window, and it can display a completely different HTML document.
Creating an iframe
To create an iframe, you need to use the <iframe> tag. See the example given below.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iframe Tag Example</title>
</head>
<body>
<iframe src="https://www.dremendo.com/html-tutorial/"></iframe>
</body>
</html>Some websites, such as google.com, can not be embedded in an iframe because they disabled the iframe embedding option known as x-frame-options. This measure prevents the website from being embedded within an iframe on any other website.
Example
<iframe src="https://www.google.com"></iframe>Embedding a YouTube video using an iframe
The iframe can be used to embed YouTube videos in a web pages. Here is an example:
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/TW3kzfTkhC4" frameborder="0"></iframe>To embed another youtube video just change the video id written after embed/TW3kzfTkhC4 with another youtube video id which you can get from the youtube website. Open the youtube.com select any video, copy the video id which is written after v= in the video url for example https://www.youtube.com/watch?v=TW3kzfTkhC4.
Attributes of iframe Tag
Here are the attributes we can use with the iframe tag:
- id
- class
- width
- height
- frameborder
- title
- style
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <iframe> tag and use it to apply a specific style to that particular tag.
Example
<iframe src="https://www.dremendo.com/html-tutorial" id="data"></iframe>In the above example, we assign an id attribute to the iframe tag with a value data. In CSS and JavaScript, we can use the name data to access the specific iframe tag whose id value is set to the name data.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the iframe tags and use it to apply a specific style to all the iframe tags that belong to a particular class.
Example
<iframe src="https://www.dremendo.com/html-tutorial" class="info"></iframe>
<iframe src="https://www.dremendo.com/html-tutorial/html-tags" class="info"></iframe>
In the above example, both iframe tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both iframe tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
width
The width attribute can be used to set the width of an iframe window in an HTML document.
Example
<iframe src="https://www.dremendo.com/html-tutorial/html-tags" width="600"></iframe>We have set the width of the iframe window to 600 pixel.
height
The height attribute can be used to set the height of an iframe window in an HTML document.
Example
<iframe src="https://www.dremendo.com/html-tutorial/html-tags" width="600" height="500"></iframe>We have set the width of the iframe window to 600 pixel and height to 500 pixel.
frameborder
The frameborder attribute can be used to specify whether the iframe should display a border or not. The value of the frameborder attribute is either "1" or "0" where 1 means yes and 0 means no.
Example
<iframe src="https://www.dremendo.com/html-tutorial/html-tags" frameborder="0"></iframe>title
The title attribute can be used to specify a short description about iframe's content. This description is read by the screen reader for visually disable person.
Example
<iframe src="https://www.dremendo.com/html-tutorial/html-tags" title="information about html tags"></iframe>style
The style attribute can be used to apply inline css styles to the iframe tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<iframe src="https://www.dremendo.com/html-tutorial/html-tags" style="border-color: red"></iframe>The style="border-color: red" will change the border color of the iframe tag to red.
