Loading
JAVA
SPRING
ANGULAR
SQL
HTML
CSS
JAVASCRIPT
Data Structure
Introduction
VS Code IDE
Tag
Elements in HTML
Attributes
Heading
Paragraph
Head
Comments
Span
Anchor Tag
Image Tag
Favicon Tag
Imoji
Symbols
Tables
Class
Id
Iframe
File Path
Colors
Formatting
Title
Quotation
Block-level elements
Inline Element
Basic HTML Design Guidelines
Entities
Div tag in HTML
HTML Lists
Ordered Lists
Unordered Lists
Description Lists
Form
Form Element
Input Element
Form Attributes
Text area Tag
Label Tag
Introduction to HTML Graphics
HTML Canvas
Transformation in Canvas
Animation in Canvas
HTML SVG
Transformation in SVG
Interactivity and Animation in SVG
Iframe
Video TutorialDiscussion
The <iframe> (short for inline frame) is used to embed another HTML document or external content within the current webpage. It is commonly used for embedding.

  • YouTube vides
  • Google Maps
  • Other webpages or web apps


Syntax:

<iframe src="URL" width="value" height="value"></iframe>


AttributeDescription
srcURL of the page/content to embed
widthWidth of the frame (in px or %)
heightHeight of the frame (in px or %)
titleOptional, for accessibility
frameborderOptional, 0 for no border
allowfullscreenEnables fullscreen for videos


Example: Embed YouTube Video

<!DOCTYPE html>
<html>

<head>
    <title>Iframe Example</title>
</head>

<body>
    <h3>Iframe Example</h3>
    <iframe src="https://www.youtube.com/embed/yZWdVIAKY0Q?si=njtJ2idTOVnza4xs" width="560px" height="315px"
        frameborder="0" allowfullscreen>
    </iframe>
</body>

</html>

Output:

Uploaded Image


You will se an embedded YouTube video right inside the page.


Example: Embed Another Website

<!DOCTYPE html>
<html>

<head>
    <title>Embed Another Website</title>
</head>

<body>
    <iframe src="https://quipoin.com/tutorial/HTML-chapter-Iframes" width="100%" height="500px">
    </iframe>
</body>

</html>

Output:

Uploaded Image


Note: Some website (like Google) may block embedding for security reasons.



Styling an Iframe

You can also use CSS for better control


Example:

<iframe src="https://quipoin.com/tutorial/HTML-chapter-Iframes" style="border: 2px solid #333; border-radius:10px;"
    width="100%" height="400px">
</iframe>

Output:

Uploaded Image



Tips

  • Do not trust input-based iframe sources to avoid cross-site scriptiong.
  • Use the sandbox attribute for extra security (limits permissions of the embedded content).


Key Point

  • The content inside an <iframe> comes from a separate source, often via a URL.
  • It is useful for embedding media, widgets, or full pages from other sites.
  • You can control its width, height and even disable borders.
  • Be cautious with security not all websites allow embedding due to restrictions.