A document within a document

iframe

The iframe element places a document within a document.

Nesting documents in this way allows the inner document's content to be changed by it's creator autonomously.

The outer containing document "frames" the inner document without duplicating it or freezing it at a point in time.

Properties

src
Use sourceref notation to identify the remote URL containing the inner document.
srcdoc
A complete inner document, written in HTML, to be used instead of the remote URL specified by `src`.
height
The height of the iframe, in pixels, but specified without units.
width
The width of the iframe, in pixels, but specified without units.
name
A name that can be used in "a", "form" and "base" elements to target this iframe.
allow
A comma-separated list of features that are allowed or enabled for the inner document. See Feature Policy for details.
Feature Description
autoplay Allows the autoplay attribute on videos within same-origin iframes
geolocation Allows/disables the use of the Geolocation API
picture-in-picture Allows the usage of Picture-in-Picture in cross-origin iframes
vertical-scroll Controls whether embedded content can interfere with vertical scrolling
sync-xhr Disallows the use of synchronous XMLHttpRequests
sync-script Prevents synchronous scripts from executing
oversized-images Ensures intrinsic size of images are not more than X times larger than their container size
unoptimized-lossy-images Requires size of JPG file, in bytes, to be no more than X times bigger than its visible size (width * height)
unoptimized-lossless-images Requires size of WEBP file, in bytes, to be no more than X times bigger than its visible size (width * height)
unoptimized-lossless-images-strict Requires size of WEBP file, in bytes, to be no more than X times bigger than its visible size (width * height)
unsized-media Sets a default size of 300x150 if dimensions aren't specified
referrerpolicy
Which referer to send to the server when requesting the inner document. See Referrer Policy for details.
Feature Situation Action
no-referrer always instructs the browser to omit the referer header completely.
no-referrer-when-downgrade when switching from https: to http: instruct the browser to omit the referer header completely.
same-origin when going from one domain to a different domain instructs the browser to omit the referer header completely.
origin always instructs the browser to send the requestor's origin only (protocol + hostname + port).
strict-origin when switching from http: to https: instructs the browser to limit the referer header to just the origin.
origin-when-cross-origin when going from one domain to a different domain instructs the browser to limit the referer header to just the origin.
strict-origin-when-cross-origin when switching from https: to http: instruct the browser to omit the referer header completely.
unsafe-url always instructs the browser to send the requestor's complete origin, resource path, and all query-string variables.

Example

iframe *width=600 *height=450 *frameborder=0 *allowfullscreen `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155801.36978800895!2d130.44082010985957!3d30.357872042577938!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x353d23ac32be358fΠxe9dcba68a8f3ca68!2sJōmon+Sugi!5e0!3m2!1sen!2sus!4v1564420414460!5m2!1sen!2sus`
Embedding a Google map within a document

iframe *width=400 *height=300 `https://twitter.com/ReadWriteTools`
Embedding a Twitter profile

semantax > media-embed > iframeA document within a document

🔎