Skip to main content

Working with Iframes in HTML (Live Playground)

Introduction​

Iframes are used to embed external content, such as web pages, videos, and maps, into your own web pages. In this tutorial, we will cover how to use the <iframe> element, its attributes, and best practices to create responsive and accessible embedded content.

The <iframe> Element​

The <iframe> element is a container that allows you to display an external HTML document within your current web page.

Example:

HTML
<iframe src="https://example.com" width="600" height="250" title="Example Website">
  Your browser does not support iframes.
</iframe>

In this example, the <iframe> element specifies the src attribute, which is the URL of the external content, along with the width and height attributes. The title attribute provides a description of the embedded content for screen reader users. The text inside the <iframe> element serves as fallback content if the browser does not support the element.

Live Playground, Try it Yourself

Attributes​

The <iframe> element supports several attributes that control its behavior and appearance:

  • src: The URL of the external content to be embedded.
  • width and height: The dimensions of the iframe in pixels.
  • title: A descriptive title for the iframe to improve accessibility for screen reader users.
  • frameborder: Determines whether to display a border around the iframe (deprecated in HTML5).
  • scrolling: Specifies whether scrollbars should be displayed (deprecated in HTML5).
  • sandbox: Applies security restrictions to the embedded content.
  • allowfullscreen: Allows the embedded content to be displayed in full-screen mode.

Responsiveness​

To make an iframe responsive, wrap it in a container <div> and use CSS to maintain the aspect ratio:

HTML
<div class="iframe-container">
  <iframe src="https://example.com" title="Example Website"></iframe>
</div>
CSS
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This technique ensures that the iframe scales properly on different devices and screen sizes.

Live Playground, Try it Yourself

Embedding Videos​

While the <video> element is useful for embedding self-hosted videos, you may also want to embed videos from external platforms, such as YouTube or Vimeo. These platforms typically provide an embed code, which includes an <iframe> element.

Example:

HTML
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
></iframe>

Embedding Maps​

Embedding a map from services like Google Maps or OpenStreetMap can improve user experience, especially for location-based websites.

Example (Google Maps):

HTML
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434681391!2d144.9554313155067!3d-37.81732797975171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f7a50d5%3A0x5045675218ce7e0!2sState%20Library%20Victoria!5e0!3m2!1sen!2sau!4v1509429262563"
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  allowfullscreen
  title="Google Maps Example"
></iframe>

Accessibility​

To improve accessibility for screen reader users, always provide a descriptive title for the iframe using the title attribute:

HTML
<iframe src="https://example.com" title="Example Website"></iframe>

Additionally, include fallback content within the <iframe> element for browsers that do not support the element:

HTML
<iframe src="https://example.com" title="Example Website"> Your browser does not support iframes. </iframe>

Conclusion​

In this tutorial, we covered how to use the <iframe> element to embed external content, such as web pages, videos, and maps, into your own web pages. We also discussed how to make iframes responsive and accessible by using CSS and the title attribute. By following these best practices, you can create engaging and user-friendly web pages with embedded content that seamlessly integrates with your site's design and functionality.