Home » HTML Iframe Tags

HTML Iframe Tags

HTML Iframe Tags

Introduction

An HTML iframe tags is a versatile tool for seamlessly embedding one web page within another. It facilitates the integration of external content into the current HTML document.

Syntax

The <iframe> tag is used to specify an inline frame:

<iframe src="<https://example.com>" title="Embedded Content"></iframe>
HTML
  • src: Specifies the URL of the page to embed.
  • title: Provides a description for accessibility, crucial for screen readers.

HTML Iframe – Set Height and Width Tags

Define the size of the iframe using the height and width attributes:

<iframe
  src="<https://example.com>"
  height="300"
  width="500"
  title="Responsive Iframe"
></iframe>
HTML

Alternatively, use inline CSS for more control:

<iframe
  src="<https://example.com>"
  style="height:200px;width:80%;"
  title="Responsive Iframe"
></iframe>
HTML

HTML Iframe – Remove the Border Tags

To remove the default border around an iframe, apply the style attribute:

<iframe>
  src="<https://example.com>"
  style="border:none;"
  title="Borderless Iframe"
</iframe>
HTML

Iframe – Target for a Link

Set an iframe as the target for a link using the name attribute:

<iframe>
  src="<https://example.com>"
  name="iframe_target"
  title="Targeted Iframe"
</iframe>

<p>
  <a href="<https://www.example-link.com>" target="iframe_target"
    >Visit Example</a>
</p>
HTML

HTML Iframe Attributes

  • allow: Specifies a Permissions Policy for the iframe.
  • allowfullscreen: Indicates whether the iframe can activate fullscreen mode.
  • allowpaymentrequest (deprecated): Allows a cross-origin iframe to invoke the Payment Request API.
  • browsingtopics (experimental): A boolean attribute specifying that selected topics for the user should be sent with the iframe’s source request.
  • credentialless: Makes the iframe credentialless, restricting its access to network, cookies, and storage data.
  • csp (experimental): Enforces a Content Security Policy for the embedded resource.
  • height: Defines the height of the frame in CSS pixels.
  • loading: Indicates when the browser should load the iframe, with options such as ‘eager’ and ‘lazy’.
  • name: Provides a targetable name for the embedded browsing context.
  • referrerpolicy: Specifies the referrer to send when fetching the frame’s resource.
  • sandbox: Controls restrictions applied to the content within the iframe.
  • src: The URL of the page to embed.
  • srcdoc: Inline HTML to embed, overriding the src attribute.
  • width: Specifies the width of the frame in CSS pixels.

Deprecated Attributes (Avoid Using)

  • align (deprecated)
  • frameborder (deprecated)
  • longdesc (deprecated)
  • marginheight (deprecated)
  • marginwidth (deprecated)
  • scrolling (deprecated)

Positioning and Scaling

Adjust the iframe’s position, alignment, and scaling using the object-position and object-fit properties in CSS.

Scripting

Scripts can access the iframe’s content using the contentWindow property and reference the parent window with window.parent. Cross-origin communication can be achieved using Window.postMessage().

Accessibility Concerns

Provide a descriptive title attribute for the iframe:

<iframe>
  title="About Us - Example Company"
  src="<https://example.com/about>"
</iframe>
HTML

This ensures users of assistive technology understand its content without the need to navigate into it.

Embedding a YouTube Video in HTML

To seamlessly integrate a YouTube video into an HTML document, follow these straightforward steps using the <iframe> tag:

Step 1: Obtain the Embed Code from YouTube

  1. Go to youtube.com.
  2. Play the desired video.
  3. Click on the “Share” button below the video player.
  4. Choose the “Embed” option.
embed-code-youtube.png

Step 2: Copy the Embed Code

  1. Once the embed code is displayed, click on the “Copy” button to copy the entire <iframe> code snippet.
copy-embed-code.png

Step 3: Paste in Your HTML Document

Now, paste the copied <iframe> code into your HTML document at the desired location.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embedded YouTube Video</title>
</head>
<body>

<!-- Paste the copied iframe code here -->
<iframe width="560" height="315" src="PASTE_YOUR_COPIED_CODE_HERE" 
title="YouTube Video Embed" frameborder="0" allowfullscreen></iframe>

</body>
</html>
HTML

Make sure to replace PASTE_YOUR_COPIED_CODE_HERE with the actual iframe code you copied from YouTube.

This straightforward process allows you to embed a YouTube video effortlessly into your HTML document.

Conclusion

HTML iframes are a powerful mechanism for integrating external content seamlessly into a webpage. Understanding the attributes and proper usage ensures effective embedding.

Frequently Asked Questions

1. an an HTML document have multiple iframes?

Ans: Yes, an HTML document can contain multiple iframes, each embedded with different content.


2. What is the purpose of the ‘sandbox’ attribute?

Ans: The ‘sandbox’ attribute controls the restrictions applied to the content within the iframe, enhancing security.


3. How can I make an iframe responsive?

Ans: Use CSS techniques like setting a percentage width or using media queries to make the iframe responsive.