iframe ... ⁄iframe

Share it

iframe intro iframe browser display iframe parents - children iframe src vs srcdoc iframe syntax iframe width, height attributes iframe name attribute iframe sandbox attribute iframe seamless attribute iframe src attribute iframe srcdoc attribute

HTML5 iframe element

The iframe element represents a nested browsing context (document in document), an inline frame. »video

All browsing contexts, including the iframe, exemplified in this »video tutorial.

About iframe

is an optional element
multiple iframe elements allowed per HTML5 document

Display & support iframe

display in browser »video
display type:
inline-block by default
or
block if seamless attribute present

Parents, children iframe

iframe nested within elements »iframe parents
elements nested within iframe »iframe children
»examples

Attributes iframe

required: none
optional: specific attributes, global attributes, event attributes

Observation: if both src and srcdoc are present on iframe element, srcdoc ensures the content of the iframe , while src provides the fallback content. »video

src vs srcdoc

The difference between the src and srcdoc attributes. »video

Syntax iframe

1	<iframe> ... </iframe> »video

Attributes and Values iframe (comma separated)

<iframe	attribute	=	"attribute_value(s)"	Video	Examples
1. specific attributes
1.	width	=	pixels	»video	<iframe width="200"> ... <⁄iframe>
2.	height	=	pixels	»video	<iframe height="100"> ... <⁄iframe>
3.	name	=	a valid browsing-context name type text	»video	<iframe name="some_name"> ... <⁄iframe>
4.	sandbox	=	"", , allow-forms, allow-pointer-lock, allow popups, allow-same-origin, allow-scripts, allow-top-navigation	»video	<iframe sandbox> ... <⁄iframe> <iframe sandbox="allow-forms"> ... <⁄iframe>
5.	seamless	=	"", , seamless	»video	<iframe seamless> ... <⁄iframe>
6.	src	=	URL	»video	<iframe src="http://any_site.com/file.php"> ... <⁄iframe> <iframe src="folder/file.php"> ... <⁄iframe> <iframe src="file_to_embed.php"> ... <⁄iframe>
7.	srcdoc	=	HTML elements	»video	<iframe srcdoc="<!doctype html>..."> ... <⁄iframe>
8.	allowfullscreen	=	"", , allowfullscreen	-	<iframe allowfullscreen> ... <⁄iframe>
	All Specific Attributes
2. global attributes
1.	accesskey	=	keyboard key	»img	<iframe accesskey="h"> ... </iframe>
2.	class	=	class name	»html »img	<iframe class="class_name"> ... </iframe>
3.	contenteditable	=	"", , true, false	»html	<iframe contenteditable="true"> ... </iframe>
4.	contextmenu	=	menu id value	»html	<iframe contextmenu="menu_id_value"> ... </iframe>
5.	data-*	=	value	-	<iframe data-http-error="404"> ... </iframe>
6.	dir	=	ltr, rtl, auto	»html	<iframe dir="ltr"> ... </iframe>
7.	draggable	=	true, , false	»img	<iframe draggable="false"> ... </iframe>
8.	dropzone	=	copy, move, link, string:, file:	-	<iframe dropzone="copy"> ... </iframe>
9.	hidden	=	"", , hidden	»html »img	<iframe hidden="hidden"> ... </iframe>
10.	id	=	id name	»html »img	<iframe id="unique_id_name"> ... </iframe>
11.	itemid	=	URL	-	-
12.	itemprop	=	string	»link »a	-
13.	itemref	=	string	-	-
14.	itemscope	=	"", , itemscope	-	-
15.	itemtype	=	absolute URL	-	-
16.	lang	=	language code	»html »head »title »img	<iframe lang="en"> ... </iframe>
17.	spellcheck	=	"", , true, false	»html	<iframe spellcheck="true"> ... </iframe>
18.	style	=	CSS property:value	»html »img	<iframe style="color:red"> ... </iframe>
19.	tabindex	=	integer	»img	<iframe tabindex="3"> ... </iframe>
20.	title	=	text	»html »link »style »abbr »dfn »img »meter	<iframe title="html page"> ... </iframe>
21.	translate	=	"", yes, no	»html »img	<iframe translate="yes"> ... </iframe>
	All Global Attributes
3. global event attributes
1.	onclick	=	script	» list	<element onclick="script" > ...
2.	ondblclick	=	script	» list	<element ondblclick="script" > ...
	All Event Attributes

Video demonstration iframe element

HTML5 iframe element: an inline frame

min	video details
00:00	video tutorial: iframe element
00:05	iframe element represents a nested browsing-context (document in document)
00:11	the nested browsing context (iframe) inside the current browsing context (browser window)
00:16	iframe element allows you to embed a whole page (document) inside the current browser window
00:40	document in document: w3-video.com in inside.php
00:55	embedding another document, index2.php, within the current document index.php
01:22	iframe attributes allow for more actions: e.g. - seamless - makes the iframe look like part of the document - sandbox - for security reasons, - name- to target the iframe...and so forth

For more information about the iframe element, please see the specs: W3C ⁄ WHATWG