1. html
  2. /tags
  3. /iframe

<iframe>

Definition

The HTML <iframe> element is used to embed another HTML document within the current HTML document. The term "iframe" stands for "inline frame".

The <iframe> element creates a rectangular area in the web page, known as the "frame," where the embedded document is displayed. The embedded document can be a webpage, a video, a PDF document, or any other type of content that can be displayed in a web browser.

The use of iframes can be useful in situations where you want to display content from another source within your own website, such as embedding a YouTube video or a Google Map. However, it is important to note that iframes can also be used for malicious purposes, such as phishing attacks, so it is important to use them with caution and ensure that you trust the source of the embedded content.

Examples

Here's an example of using the <iframe> element to embed a YouTube video on a webpage:

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded YouTube Video</title>
  </head>
  <body>
    <h1>Check out this video!</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

In this example, we set the width and height of the iframe to 560 pixels and 315 pixels, respectively, using the width and height attributes. We also set the src attribute to the URL of the YouTube video we want to embed, and we set the allowfullscreen attribute to allow the video to be viewed in full screen mode.

Attributes

This element's attributes include the global attributes.

AttributeDescriptionDeprecated?
srcSpecifies the URL of the content to be displayed within the frameNo
widthSpecifies the width of the frame in pixels or as a percentage of the available widthNo
heightSpecifies the height of the frame in pixels or as a percentage of the available heightNo
frameborderSpecifies whether or not the frame should have a border around it. Set to 0 to remove the border or 1 to display itNo
scrollingSpecifies whether or not the frame should have scrollbars. Set to yes to display scrollbars or no to hide themNo
nameSpecifies a name for the frame, which can be used as the target for hyperlinks and form submissionsNo
sandboxSpecifies a set of restrictions for the content within the frame, such as preventing it from accessing cookies or executing scriptsNo
allowfullscreenSpecifies whether or not the content within the frame should be allowed to enter full screen modeNo
loadingSpecifies how the content within the frame should be loaded. Set to eager to load the content immediately or lazy to defer loading until it is neededNo
referrerpolicySpecifies how the frame should send the Referer HTTP header when making requests for contentNo

Best Practices

  • Always set the src attribute to a trusted source. Avoid using iframes to display content from untrusted sources, as it can pose a security risk.
  • Specify the width and height attributes to ensure that the iframe has appropriate dimensions and does not disrupt the layout of the page.
  • Use the title attribute to provide a meaningful description of the content within the iframe. This can improve accessibility for users who rely on screen readers.
  • Use the allowfullscreen attribute judiciously. While it can provide a better user experience for certain types of content, such as videos, it can also be abused to display misleading or malicious content.
  • Consider using the sandbox attribute to further restrict the behavior of the content within the iframe. This can help mitigate the risks of cross-site scripting (XSS) attacks or other security vulnerabilities.
  • Avoid using iframes for layout purposes or to include large amounts of content, as it can affect the performance of the page and make it harder to maintain.
  • Test your iframes across different browsers and devices to ensure that they work as expected and do not cause any layout or performance issues.

Accessibility Considerations

  • Provide a descriptive title for the iframe using the title attribute. This helps users who rely on screen readers to understand the purpose and context of the embedded content.
  • Use the longdesc attribute to provide additional information about the content within the iframe, if necessary. This can help users who cannot access the content within the iframe, such as those who are visually impaired.
  • Ensure that the content within the iframe is accessible and conforms to web accessibility guidelines. This includes using proper heading levels, providing alternative text for images, and ensuring that interactive elements are keyboard accessible.
  • Use appropriate contrast ratios and color combinations within the iframe to ensure that the content is readable and distinguishable for users with low vision.
  • Consider using the sandbox attribute to further restrict the behavior of the content within the iframe. This can help mitigate the risks of cross-site scripting (XSS) attacks or other security vulnerabilities that can affect the accessibility of the page.
  • Test the iframe with screen readers and other assistive technologies to ensure that it is accessible and functions as expected.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes