Html iframe with contents

HTML Tag

An inline frame is used to embed another document within the current HTML document.

Tip: Use CSS to style the (see example below).

Tip: It is a good practice to always include a title attribute for the . This is used by screen readers to read out what the content of the is.

Browser Support

Attributes

Attribute	Value	Description
allow	Specifies a feature policy for the
allowfullscreen	true false	Set to true if the can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest	true false	Set to true if a cross-origin should be allowed to invoke the Payment Request API
height	pixels	Specifies the height of an . Default height is 150 pixels
loading	eager lazy	Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met
name	text	Specifies the name of an
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Specifies which referrer information to send when fetching the iframe
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Enables an extra set of restrictions for the content in an
src	URL	Specifies the address of the document to embed in the
srcdoc	HTML_code	Specifies the HTML content of the page to show in the
width	pixels	Specifies the width of an . Default width is 300 pixels

Источник

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

Example of an HTML Tag:

html> html> head> title>Title of the document title> head> body> iframe src="https://www.w3docs.com"> iframe> body> html>

To set the size of iframe, use the height and width attributes, or use CSS. The attribute values are set in pixels by default, but they can also be in percent.

Example of an HTML Tag With the Height and Width Attributes :

html> html> head> title>Title of the document title> head> body> iframe src="https://www.w3docs.com" width="80%" height="300"> iframe> body> html>

By default, an iframe is surrounded by a border. To remove the border, you can use CSS border property.

Example of an HTML Tag With the CSS Border Property:

html> html> head> title>Title of the document title> head> body> iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"> iframe> body> html>

The new loading attribute

There is a new HTML loading attribute that allows deferring image and iframe loading until they are close to being shown. For this feature, the WHATWG has a pull request, and it is already a part of Chromium (as of v76).

Supported values for the loading attribute include:

• «lazy», which defers the load until the image or iframe reaches a distance threshold from the viewport.
• «eager», which loads the resource immediately.
• «auto», which is the default behavior, eagerly load the resource.

You can use the lazy value to take advantage of browser-native lazy loading:

iframe src="video-player.html" loading="lazy">iframe>

Lazy loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time when those resources are needed instead of loading them upfront. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

Attributes

Attribute	Value	Description
align	left right top bottom middle	Specifies how text is aligned and wrapped around the frame. Not supported in HTML5.
allowfullscreen	Defines that the frame can be opened in a full screen mode.
frameborder	1 0	Defines if the iframe border around the frame should be displayed or not. Not supported in HTML 5.
height	pixels	Defines the height of the frame (default height 150 pix).
longdesc	URL	Defines a page which has a long description of the content. Not supported in HTML 5.
marginheight	pixels	Defines the top and bottom margins of the frame. Not supported in HTML 5.
marginwidth	pixels	Defines the left and right margins of the frame. Not supported in HTML 5.
name	text	Defines the name of the frame.
sandbox
	Brings extra restrictions for the content inside the frame.
	«»	Applies all restrictions.
	allow-forms	Allows submission of forms or an embedded page.
	allow-same-origin	Considers the attached document as a document downloaded from the same source as the parent document.
	allow-scripts	Enables execution of scripts on a nested page.
	allow-top-navigation	Allows the contents of the attached document to access top-level elements (documents, windows).
scrolling	yes no auto	Defines whether the scroll bar should be displayed or not. Not supported in HTML 5.
seamless	seamless	Specifies that the contents of the attached document should be displayed as part of the parent document.
src	URL	Specifies the address of the document whose contents will be loaded into the frame.
srcdoc	HTML_code	Stores the contents of the frame directly in the attribute.
width	pixels	Defines the width of the frame. (default width is 300px).

Источник