• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Iframes

← Previous Next →

🔹 What is an HTML <iframe>?

An iframe (Inline Frame) is used to embed another HTML page or content (like a video, map, or another website) into the current webpage.

🔹 Basic Syntax
<iframe src="url" width="width" height="height"></iframe>
Attribute Description
src The URL of the page to display
width Width of the iframe (px or %)
height Height of the iframe (px or %)
🔹 Example: Embed a Website
<iframe src="https://www.example.com" width="600" height="400"></iframe>
🔹 Example: Embed a YouTube Video
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/tgbNymZ7vqY" 
title="YouTube video" frameborder="0" 
allowfullscreen></iframe>
🔹 Example: Embed a Google Map
<iframe 
  src="https://www.google.com/maps/embed?pb=..." 
  width="600" height="450" style="border:0;" 
  allowfullscreen="" loading="lazy">
</iframe>

🔹 Removing the Border

<iframe src="page.html" style="border: none;" width="500" height="300"></iframe>

🔹 Restricting Interaction

Use the sandbox attribute to apply security restrictions:

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

You can also use:

<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>

🔹 Targeting an iframe using links

<iframe name="myframe" width="500" height="300"></iframe>
<a href="page.html" target="myframe">Load Page in iframe</a>

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.

HTML Iframes Quiz

Q1: Which HTML tag is used to embed another page into the current page?

A. <embed>
B. <iframe>
C. <frame>
D. <object>

Q2: What attribute specifies the URL of the iframe content?

A. href
B. src
C. link
D. target

Q3: What is the default behavior if the iframe content is not found?

A. Shows an empty frame
B. Shows an error page
C. Crashes the browser
D. Reloads the page

Q4: Which attribute is used to secure iframe content?

A. readonly
B. secure
C. sandbox
D. restrict

Q5: What does the allowfullscreen attribute do?

A. Hides iframe border
B. Lets iframe be draggable
C. Enables fullscreen for media
D. Allows resizing iframe

Q6: Which tag can you use to load a video from YouTube?

A. <embed>
B. <video>
C. <iframe>
D. <media>

Q7: Which attribute allows an iframe to be the target of a link?

A. name
B. id
C. target
D. src

Q8: Can you use an iframe to embed a PDF?

A. No
B. Yes, using the src of the PDF file
C. Only with plugins
D. Only in Safari

Q9: What happens if the iframe content uses scripts and sandbox is set without allow-scripts?

A. Scripts run normally
B. Scripts won’t run
C. Iframe breaks
D. Page crashes

Q10: What is the purpose of frameborder="0"?

A. To resize the iframe
B. To hide the border
C. To change background color
D. To make it full width
← Previous Next →
Login
Go Back Top