iframes in HTML

The <iframe> label in HTML is used to add another webpage inside the current webpage. It's like placing one browser window inside another. This is useful for displaying YouTube videos, charts,map, documents, and indeed other websites.

Basic Syntax


      <iframe 
        src="https://www.google.com" 
        width="800" 
        height="600" 
        title="Embedded Google Website"
      ></iframe>

Attributes of <iframe>

  • src: The URL of the web page to add.
  • width & height: confines of the iframe (in pixels or percentage).
  • title: Description for availability (screen readers).
  • frameborder: Sets border (disapproved in HTML5, use CSS rather).
  • allowfullscreen: Allows full-screen view (useful for videos).
  • loading: Can be set to "lazy" for performance optimization (loads when the iframe is about to enter the viewport).

Example Adding a Website(Google)


      <iframe 
        src="https://www.google.com" 
        width="800" 
        height="600" 
        title="Embedded Google Website"
      ></iframe>

Example Bedding a YouTube Video

<iframe
      src="https://www.youtube.com/embed/exampleVideoID"
      width="560"
      height="315"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
      ></iframe>

Preview :

(This image here showing a webpage with a bordered area inside it displaying the content of another website or a YouTube video player.)

illustration Bedding a Chart


         <iframe 
           src="path/to/your/chart.html" 
           width="600" 
           height="400" 
           title="Embedded Chart"
         ></iframe>

Security Note

Some websites block their webpages from being added in an iframe for security reasons using X-Frame-Options or Content Security Policy (CSP) headers. In similar cases, the iframe may show an error or remain blank.

When Not to Use

  • If you do n’t own or control the content being added.
  • If the added point has heavy advertisements or trackers.
  • When you want to modification website performance (iframes can sometimes slow down page load).

"With iframes, you open a window into another world — added within your own."

Try it Yourself