W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

iframe ... ⁄iframe

Share it

iframe intro iframe browser display iframe parents - children iframe src vs srcdoc iframe syntax iframe width, height attributesiframe name attributeiframe sandbox attributeiframe seamless attributeiframe src attributeiframe 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

Display & support iframe

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children iframe

Attributes iframe

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)

<iframeattribute="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 popups,
»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: W3CWHATWG