• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Iframes

← Previous Next →

An iframe allows you to display a separate webpage inside your current webpage. Think of it as a small window within your page that loads another HTML document. This can be content from your own website or from any external source. Iframes are commonly used for maps, videos, ads, forms and dashboards. They are simple to set up but offer enough flexibility to control size, style, permissions and behavior. In this chapter, you will learn how iframes work, how to structure them correctly and how to handle the most common use cases.

What is an HTML iframe

An iframe (Inline Frame) is a container that loads another webpage in the browser window. Even though it appears inside your current page, the iframe content is treated as a separate document. This means the CSS and JavaScript of your main page do not automatically affect the inside of the iframe unless you explicitly allow it.

Basic syntax:

<iframe src="page.html"></iframe>

Here, the src attribute tells the browser which file or URL to load. You can load any resource that is publicly accessible or allowed by the server. If the file path is wrong or the server has restrictions, the iframe will fail to load.

Setting width and height

Controlling the size of the iframe is important because it affects how users view the embedded content. You can set fixed values using pixels or use percentages to make the iframe responsive.

Example with fixed size:

<iframe src="demo.html" width="500" height="300"></iframe>

If you want the iframe to stretch across the full width of the screen:

<iframe src="demo.html" width="100%" height="400"></iframe>

Using percentages is helpful for responsive designs because the iframe will adjust itself according to the device width. Height still needs to be fixed unless additional CSS is applied.

Adding or removing borders

Some browsers display borders around iframes by default. You can remove or style them using CSS.

Removing the border:

<iframe src="demo.html" style="border:none;"></iframe>

Adding a custom border:

<iframe src="demo.html" style="border:2px solid #555;"></iframe>

You can also add rounded corners:

<iframe 
  src="demo.html" 
  style="border:1px solid #ccc; border-radius:12px;">
</iframe>

This gives the embedded content a cleaner and more modern look.

Adding inline CSS to an iframe

An iframe behaves like any other HTML element, so you can style it using inline CSS, internal CSS, or external stylesheets.

Example:

<iframe 
  src="profile.html" 
  width="600" 
  height="350" 
  style="border:1px solid #eee; border-radius:8px; box-shadow:0 0 10px #ddd;">
</iframe>

You can apply padding, margins, shadows and position properties to the iframe itself. But remember, styling inside the iframe requires access to the iframe document.

Embedding external websites

Iframes are perfect for embedding external content like:

  • Google Maps

  • YouTube videos

  • Calendars

  • Dashboards

  • Survey forms

  • Social media widgets

Example:

<iframe 
  src="https://www.google.com/maps/embed?...."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen>
</iframe>

However, some websites block iframe embedding using the X-Frame-Options or Content-Security-Policy headers. If such protection exists, the browser will refuse to load the site inside an iframe.

Using the allow attribute for permissions

Modern browsers require explicit permission for actions like fullscreen, camera access or autoplay media. You can control this with the allow attribute.

Allow fullscreen:

<iframe src="video.html" allow="fullscreen"></iframe>

Allow multiple permissions:

<iframe 
  src="app.html"
  allow="camera; microphone; fullscreen; autoplay">
</iframe>

This is common for embedded games, video calls or video players.

Preventing iframe scrolling

Some content inside the iframe may be longer than the defined height, which causes scrollbars to appear. You can hide them using CSS:

<iframe src="demo.html" style="overflow:hidden;"></iframe>

This works only if the iframe content does not force scrollbars due to large elements. Also, many browsers do not fully support removing scrollbars unless the content inside is adjusted.

The name attribute and targeting

The name attribute is useful when you want links on your page to load inside the iframe.

Example:

<iframe src="home.html" name="myframe" width="500" height="300"></iframe>

<a href="about.html" target="myframe">Open About Page</a>

When the user clicks the link, the iframe loads the new content instead of refreshing the whole page. This technique can help create a small navigation area without using JavaScript.

Adding a title for accessibility

The title attribute improves accessibility for screen readers:

<iframe src="stats.html" title="Statistics Panel"></iframe>

This helps users understand what the iframe contains. Many accessibility audits require iframe titles.

Security considerations

Iframes are powerful, but they can also introduce security issues if not handled correctly. Here are some safety tips:

  1. Avoid embedding unknown or unsafe websites.

  2. Use HTTPS links inside iframes.

  3. Apply the sandbox attribute whenever possible.

Example of a sandboxed iframe:

<iframe 
  src="widget.html" 
  sandbox>
</iframe>

Sandbox restrictions can include blocking scripts, form submissions and other actions unless enabled using flags.

A stronger sandbox with controlled permissions:

<iframe 
  src="widget.html"
  sandbox="allow-same-origin allow-scripts">
</iframe>

Using sandbox improves security when embedding third-party content.

Summary of HTML Iframes

Iframes let you load external or internal webpages inside your HTML document. You learned how to set the src, adjust width and height, style borders, hide scrollbars, give permissions, add accessibility titles, and control security using sandbox. Iframes are ideal for embedding maps, videos, dashboards and many types of external widgets. Even though they are easy to use, you should always check permissions and security settings before embedding third-party content.

Practice Questions

Q1. Create an iframe that loads https://example.com.

Q2. Embed a YouTube video using an iframe.

Q3. Display an HTML file info.html inside an iframe.

Q4. Create an iframe with a height of 400px and width of 700px.

Q5. Remove the border from an iframe using inline CSS.

Q6. Add a link that opens content into a named iframe.

Q7. Embed a Google Map of your city using iframe code.

Q8. Use the sandbox attribute to disable forms and scripts.

Q9. Make an iframe responsive using CSS.

Q10. Embed a PDF file using iframe in a webpage.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top