HTML Tutorial

HTML Tag: <iframe>

Usage of <iframe>

The <iframe> tag creates an inline frame that embeds another web page or document within the current page. It allows you to display content from a different source seamlessly within your own page.

Attributes of <iframe>

  • src: The URL of the web page or document to be embedded.
  • width: The width of the embedded frame.
  • height: The height of the embedded frame.
  • scrolling: Whether to show scrollbars in the frame ('no', 'yes', or 'auto').
  • seamless: Whether to hide the browser's border and controls (Boolean).

Examples with <iframe>

  • Embed a YouTube video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/123" frameborder="0" allowfullscreen></iframe>
  • Embed a Google Map:
<iframe src="https://maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;output=embed" width="800" height="600" frameborder="0"></iframe>

Exploring the <iframe> Tag

To use the <iframe> tag effectively, consider the following:

  • Cross-Origin Policy: The embedded content must be served from the same domain or have a CORS policy that allows access from your domain.
  • Security: Ensure the embedded content is from a trusted source to prevent potential security risks.
  • Responsiveness: Set the width and height of the frame to match the aspect ratio of the embedded content for optimal responsiveness.
  • Accessibility: Provide alternative content within the <iframe> tag using the srcdoc attribute to support accessibility for users with disabilities.