Content embedded in html

: The Embed External Content element

The HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

Try it

Note: This topic documents only the element that is defined as part of the HTML Living Standard. It does not address earlier, non-standardized implementation of the element.

Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon is generally not wise if you want your site to be operable on the average user’s browser.

Attributes

This element’s attributes include the global attributes.

The displayed height of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.

The URL of the resource being embedded.

The MIME type to use to select the plug-in to instantiate.

The displayed width of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.

Usage notes

You can use the object-position property to adjust the positioning of the embedded object within the element’s frame, and the object-fit property to control how the object’s size is adjusted to fit within the frame.

Examples

embed type="video/quicktime" src="movie.mov" width="640" height="480" title="Title of my video" /> 

Accessibility concerns

Use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title’s value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the embed element contains interactive content like video or audio.

Technical summary

Content categories	Flow content, phrasing content, embedded content, interactive content, palpable content.
Permitted content	None; it is a void element.
Tag omission	Must have a start tag, and must not have an end tag.
Permitted parents	Any element that accepts embedded content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	application , document , img , none , presentation
DOM interface	HTMLEmbedElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Tag

The tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

Warning

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

Suggestion

To display a picture, it is better to use the tag.

To display HTML, it is better to use the tag.

To display video or audio, it is better to use the and tags.

Browser Support

Attributes

Attribute	Value	Description
height	pixels	Specifies the height of the embedded content
src	URL	Specifies the address of the external file to embed
type	media_type	Specifies the media type of the embedded content
width	pixels	Specifies the width of the embedded content

Global Attributes

Event Attributes

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Content embedded in html

Securely embed content on your site

Published on Wednesday, April 13, 2022 • Updated on Thursday, April 14, 2022

Developer Advocate for Web

Technical Writer, Google Chrome

Embedded content is the best way to keep users on your site, while sharing content from other pages or sites. This could be as small as an embedded Tweet, which displays in Twitter’s style and format. It could be as large as an entirely separate site embedded onto your own, such as an embedded Shopify shop where visitors can make a purchase without leaving your site.

Now more than ever, it’s important that our sites remain secure when we embed content.

Alternatively, you could use a proposed HTML element:

• is proposed as a privacy-preserving way to embed third party content.
• is proposed for more seamless page transitions.

Read on to learn how to improve the security of your embedded content.

# Embed with iframes

Iframes can be used for all sorts of use cases, such as adding maps or forms to a contact page, and displaying ads.

iframe src="https://example.com/maps">iframe>

Each iframe has its own browsing context, with its own session history and document. The context that embeds the iframe is referred to as the parent browsing context.

Third-party content displayed in an iframe can interact with the parent site through postMessage() . This allows developers to send arbitrary values between browsing contexts. The message receiver can use the event listener onmessage to receive the values.

// inside iframe
window.parent.postMessage("ping", "https://example.com");

// window
window.addEventListener("message", (event) =>  
console.log(event.data);
>)

# Added security with the sandbox attribute

If malicious content is deployed in an iframe, it’s possible that unintended actions (such as a JavaScript execution or form submission) could be executed. To avoid this, the sandbox attribute restricts the executable APIs in the iframe and disables potentially harmful features.

iframe src="https://example.com" sandbox>iframe>

Sandbox may make certain APIs unavailable that are important to your embedded content. To allow a disabled API, you can explicitly add an argument to the sandbox attribute.

iframe sandbox="allow-forms" src="https://example.com">iframe>

There are a number of possible values for the sandbox specification, including allow-forms , allow-same-origin , allow-popups , and more.

# Permissions Policy

As increasingly powerful features have been developed for the web, permissions policies were created to manage permissions for all of them. A permissions policy can be applied to a parent site and to iframe content. The permissions granted to a parent site can also be granted to the iframe, using the allow attribute.

iframe src="https://example.com" allow="fullscreen">iframe>

# Embed with fenced frames

A fenced frame ( ) is a proposed HTML element for embedded content, similar to an iframe. Unlike an iframe, a fenced frame restricts communication with its embedding context to allow the frame access to cross-site data without sharing it with the embedding context. Similarly, first-party data on the parent’s page cannot be shared with the fenced frame.

fencedframe src="https://3rd.party.example">fencedframe>

Fenced Frames is a Privacy Sandbox proposal which suggests top-level sites should partition data. Many of the Privacy Sandbox proposals aim to satisfy cross-site use cases, without third-party cookies or other tracking mechanisms. Certain Privacy Sandbox APIs may require select documents to render within a fenced frame.

For example, a fenced frame will be created for the winner of the FLEDGE API ad auction. The FLEDGE API will provide an opaque source, a location-independent URN scheme, which can render within a fenced frame. Opaque sources allow sites to display content on their sites without revealing the ad source URL to the site owner.

fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a">fencedframe>

Ultimately, fenced frames won’t replace iframes. You won’t have to use them. Fenced frames are proposed for a more private frame for usage when data from different top-level partitions needs to be displayed on the same page.

# Embed with portals

Portal ( ) is a proposed HTML element with an independent browsing context, which could improve the page transition experience. Portals embed content like iframe, but the user cannot access the portal’s code. A portal is view-only and cannot be interacted with by users.

Portals offer the low complexity of a multi-page application with the seamless transitions of a single-page application. These transitions can be animated, quickly replacing the content in the browser window.

portal src="https://example.com/">portal>

The portal specification is still in the early stages of development.

# Other HTML elements used for embeds

There was also a time when plugin technologies, such as the Java element, were used to cover other use cases. This was later replaced by the element. Both of these elements were commonly used to display Flash plugins, but were also used to display other HTML elements (similar to iframes). Other elements, such as , , , and , have rendered both the and elements obsolete.

Although and are not officially deprecated yet, it’s best to avoid them, especially since they have some strange behaviors. was removed from the HTML specification in 2017.

# Conclusion

You can securely embed content onto any website, using the existing iframe specification. More HTML elements, including and have been proposed for security and style improvements. We’ll continue to share the progress on the Fenced Frames proposal as it progresses.

Updated on Thursday, April 14, 2022 • Improve article

Источник