HTML Iframes
An <iframe>, short for inline frame, is an HTML element used to embed another HTML document within the current document. It is commonly used to display content like videos, maps, or other web pages within a web page.
Iframe Syntax
This HTML code includes a heading and an embedded YouTube video using an <iframe> element.
<!DOCTYPE html>
<html>
<body>
<h2>Iframe Syntax Example</h2>
<iframe src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″ width=”560″ height=”315″> </iframe>
</body>
</html>
Output:
In this example:
⦁ <h2>Iframe Syntax Example</h2>: This creates a second-level heading (H2) with the text “Iframe Syntax Example”.
⦁ <iframe>: This element is used to embed another HTML document within the current document. In this case, it is used to embed a YouTube video.
⦁ src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″:
⦁ src attribute specifies the URL of the page to embed. This URL is the embed link for a specific YouTube video.
⦁ width=”560″: This sets the width of the iframe to 560 pixels.
⦁ height=”315″: This sets the height of the iframe to 315 pixels.
Attributes of <iframe>
The <iframe> element supports several attributes that you can use to control its behavior and appearance.
Here is a table of the common <iframe> attributes
| Attribute | Description |
|---|---|
| src | Specifies the URL of the page to embed. |
| width | Sets the width of the iframe. |
| height | Sets the height of the iframe. |
| name | Assigns a name to the iframe, useful for targeting links or forms to the iframe. |
| allow | Specifies a feature policy for the iframe (e.g., camera, autoplay). |
| allowfullscreen | Allows the iframe to be viewed in full-screen mode. |
| loading | Controls how the iframe should be loaded (lazy or eager). |
| style | Adds CSS styles to the iframe. |
| srcdoc | Embeds HTML content directly within the iframe. |
Using Attributes
Name Attribute
The name attribute targets an iframe with a link or form. This is useful for opening links in a specific iframe.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe Name Attribute Example</h2>
<iframe src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″ name=”videoIframe”></iframe>
<br>
<a href=”https://www.youtube.com/embed/N1CZYrkQaCo?si=G9VeaRziiC-DPm7a” target=”videoIframe”>Change Video in Iframe</a>
</body>
</html>
Output:
In this example:
⦁ <iframe>: Embeds another HTML document within the current document.
⦁ src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″: URL of the initial YouTube video to be embedded.
⦁ name=”videoIframe”: Assigns the name “videoIframe” to the iframe. This name can be used as a target for links.
⦁ <a>: Creates a hyperlink.
⦁ href=”https://www.youtube.com/embed/N1CZYrkQaCo?si=G9VeaRziiC-DPm7a”: URL of the new YouTube video to be loaded in the iframe.
⦁ target=”videoIframe”: Specifies that the link should open in the iframe with the name “videoIframe”.
⦁ Change Video in Iframe: Text of the link that users will click.
Allow Attribute
The allow attribute is used to specify a feature policy for the iframe, such as camera access or autoplay.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe with Allow</h2>
<iframe src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″ allow=”camera; autoplay”></iframe>
</body>
</html>
Output:
In this example:
⦁ <iframe>: Embeds another HTML document within the current document.
⦁ src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″: URL of the YouTube video to be embedded.
⦁ allow=”camera; autoplay”: The allow attribute specifies a list of permissions for the iframe content.
⦁ camera: Allows the embedded content to access the camera.
⦁ autoplay: Allows the embedded content to autoplay media (like videos or audio).
Allowfullscreen Attribute
This attribute allows the iframe to be viewed in full-screen mode.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe with Allowfullscreen</h2>
<iframe src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″ allowfullscreen></iframe>
</body>
</html>
Output:
In this example:
⦁ <iframe>: Embeds another HTML document within the current document.
⦁ src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″: URL of the YouTube video to be embedded.
⦁ allowfullscreen: This attribute enables fullscreen mode for the iframe content, allowing users to expand the video to fill the entire screen.
Style Attribute
You can apply CSS directly to the iframe using the style attribute.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe with Style</h2>
<iframe src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″ style=”border: 7px solid red;”></iframe>
</body>
</html>
Output:
In this example:
⦁ <iframe>: Embeds another HTML document within the current document.
⦁ src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″: URL of the YouTube video to be embedded.
⦁ style=”border: 7px solid red;”: Inline CSS style that adds a red border around the iframe with a width of 7 pixels.
Responsive Iframes
To make iframes responsive, you can use CSS to adjust their width and height based on the viewport.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>Responsive Iframe</h2>
<div style=”width: 100%; height: 0; padding-bottom: 56.25%; position: relative; border: 5px solid orange”>
<iframe src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″ class=”responsive-iframe” style=”position: absolute; top: 0; left: 0;”></iframe>
</div>
</body>
Output:
In this example:
⦁ <style>: Defines internal CSS styles.
⦁ .responsive-iframe: CSS class for making the iframe responsive.
⦁ width: 100%;: Makes the iframe’s width 100% of its containing element.
⦁ height: 100%;: Makes the iframe’s height 100% of its containing element.
⦁ border: none;: Removes the default border of the iframe.
⦁ <h2>Responsive Iframe</h2>: Creates a second-level heading with the text “Responsive Iframe”.
⦁ <div style=”width: 100%; height: 0; padding-bottom: 56.25%; position: relative; border: 5px solid orange;”>:
⦁ style=”width: 100%; height: 0; padding-bottom: 56.25%; position: relative; border: 5px solid orange;”: Inline CSS to style the div as follows:
⦁ width: 100%;: Makes the div’s width 100% of its containing element.
⦁ height: 0;: Sets the height to 0, but the padding-bottom will give it height.
⦁ padding-bottom: 56.25%;: Creates a padding that maintains a 16:9 aspect ratio (9/16 = 0.5625).
⦁ position: relative;: Sets the position to relative to allow absolutely positioned children.
⦁ border: 5px solid orange;: Adds a 5-pixel solid orange border around the div.
⦁ <iframe>: Embeds another HTML document within the current document.
⦁ src=”https://www.youtube.com/embed/zQ8VL_1pSWE?si=-2O-cEXH5RcHAdi8″: URL of the YouTube video to be embedded.
⦁ class=”responsive-iframe”: Applies the .responsive-iframe class to the iframe.
⦁ style=”position: absolute; top: 0; left: 0;”: Inline CSS to position the iframe absolutely within its containing div:
⦁ position: absolute;: Positions the iframe absolutely within its relatively positioned parent.
⦁ top: 0; left: 0;: Positions the iframe at the top-left corner of the parent div.
Embedding YouTube Videos
You can easily embed YouTube videos using the <iframe> element.
Step-by-Step
⦁ Find the video on YouTube.
⦁ Click on the “Share” button below the video.
⦁ Click on “Embed” to get the embed code.
⦁ Copy the embed code and use it in your HTML.
Here’s a complete example with a specific video:
Output:
Embedding Google Maps
You can also embed Google Maps using the <iframe> element.
Step-by-Step
⦁ Go to [Google Maps](https://maps.google.com).
⦁ Find the location you want to embed.
⦁ Click on the “Share” button and then select “Embed a map”.
⦁ Copy the embed code provided by Google Maps.
⦁ Use it in your HTML Code.
Here’s a complete example with a specific location:
See the Pen HTML Embedding Google Maps by Training Course (@Training-Course) on CodePen.
Output:
Best Practices
⦁ Security: Be cautious of embedding content from untrusted sources as it can pose security risks.
⦁ Loading Performance: Use the loading attribute to lazy-load iframes that are off-screen to improve performance.
⦁ Accessibility: Ensure that the iframe content is accessible to all users, including those using screen readers.
YouTube Reference :
Practice Scenarios
Scenario 1: Embedding a YouTube Video
Objective: Embed a YouTube video into your webpage.
Expected Output: A webpage displaying an embedded YouTube video.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Embed YouTube Video</title>
</head>
<body>
<h1>Watch this video:</h1>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/j3_06rkrsLs?si=2KkxI6oOcXsll1EA” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
</body>
</html>
Output:
Scenario 2: Displaying a Google Map
Objective: Embed a Google Map showing a specific location.
Expected Output: A webpage displaying an embedded Google Map.
Output:
Scenario 3: Embedding an External Website
Objective: Embed an external website within your webpage.
Expected Output: A webpage displaying an embedded view of another website.
Output:
