HTML Iframe

Learn how to embed external content like websites, videos, or interactive tools into your web pages using <iframe>.

What is an HTML Iframe?

<iframe> is an HTML element that allows you to embed another HTML document or resource inside your webpage.

  • Embed external websites
  • Display videos from platforms like YouTube
  • Include interactive maps or tools

Real-Life Example: Like a window into another page, an iframe lets users see external content without leaving your site.

Common Iframe Attributes

  • src – URL of the page to embed
  • width – Width of the iframe
  • height – Height of the iframe
  • title – Description for accessibility
  • frameborder – Border visibility (deprecated, use CSS)
  • allowfullscreen – Allow full-screen mode (for videos)

Iframe Code Examples

Example 1: Embedding a YouTube Video


<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>

Example 2: Embedding a Website


<iframe src="https://www.crackease.com" 
    width="100%" 
    height="500px" 
    title="CrackEase Homepage"></iframe>

Making Iframes Responsive

To make iframes responsive, wrap them in a container and use CSS to adjust the width and height dynamically.

Example: Responsive Iframe CSS


<div class="iframe-container">
    <iframe src="https://www.crackease.com" title="CrackEase Homepage"></iframe>
</div>

<style>
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>

Best Practices

  • Always include title for accessibility
  • Use secure https URLs
  • Avoid embedding unsafe or untrusted sites
  • Make iframes responsive for mobile devices
  • Use sandboxing (sandbox attribute) when embedding unknown content

Pro Tip: Iframes can improve user experience but should be used carefully to avoid security and accessibility issues.