Web Analytics
☕ Coffee 𝕏 Follow
0%

HTML Iframes

Beginner ~8 min read

What is an Iframe?

An <iframe> (inline frame) is used to embed another HTML document within the current page. It's commonly used for:

  • Embedding YouTube videos
  • Displaying Google Maps
  • Showing content from other websites
  • Embedding third-party widgets

Basic Iframe Syntax

HTML
CSS
JS

Embedding YouTube Videos

YouTube provides embed codes that use iframes. Click "Share" then "Embed" on any YouTube video to get the code.

HTML
CSS
JS

Iframe Attributes

  • src - URL of the page to embed
  • width/height - Dimensions of the iframe
  • frameborder - Border around iframe (use 0 for none)
  • allowfullscreen - Allows fullscreen mode
  • sandbox - Applies extra restrictions for security
  • loading="lazy" - Defers loading until visible

Security with Sandbox

The sandbox attribute restricts what the iframe can do:

HTML
CSS
JS
Security Note: Some websites block being embedded in iframes using X-Frame-Options headers.

Quick Quiz

What attribute is used to enable fullscreen mode for embedded videos?

A
fullscreen
B
allowfullscreen
C
enablefullscreen
D
fullscreenmode
Previous Audio & Video
Next Lists