Iframe
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:
Example: Embed YouTube Video
Output:
You will se an embedded YouTube video right inside the page.
Example: Embed Another Website
Output:
NOTE: Some website (like Google) may block embedding for security reasons.
Styling an Iframe
You can also use CSS for better control
Example:
Output:
Tips
<iframe src="URL" width="value" height="val"></iframe>
| Attribute | Description |
|---|---|
| src | URL of the page/content to embed |
| width | Width of the frame (in px or %) |
| height | Height of the frame (in px or %) |
| title | Optional, for accessibility |
| frameborder | Optional, 0 for no border |
| allowfullscreen | Enables 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:
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:
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:
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.