HTML Embedded Media

Understanding HTML Embedded Media

Embedded media allows content hosted by another website or service to appear directly within your webpage.

Videos, maps, presentations, documents, and interactive tools are commonly embedded using code supplied by the content provider, often through an HTML <iframe> element.

What Is Embedded Media?

Embedded media is content displayed on a webpage while the actual resource is hosted or provided elsewhere. Instead of placing the media file directly on your website, the page displays content supplied by another source.

A common example is a video hosted by a video service but displayed and played directly within another website.

Hosted vs Embedded Media

HTML can display media that you host yourself or media provided by another service. Self-hosted audio and video normally use the <audio> and <video> elements, while third-party media is frequently embedded with an <iframe>.

<video controls>
  <source src="/audio-video/movie.mp4" type="video/mp4">
</video>

<iframe
  src="https://example.com/embed/media"
  title="Embedded media">
</iframe>

With self-hosted media, you are responsible for the media files and delivery. With externally embedded media, the provider hosts and delivers the resource while your page supplies the space in which it appears.

Embed Code

Many online services provide ready-made HTML known as embed code. The code can usually be copied from the service and placed into the HTML where the external content should appear.

<iframe
  src="https://example.com/embed/content"
  width="560"
  height="315"
  title="Embedded content"
  loading="lazy"
  allowfullscreen>
</iframe>

The exact attributes vary by provider. When using supplied embed code, review the source URL, permissions, dimensions, title, and other attributes before adding it to a webpage.

Common Embedded Content

Many types of externally hosted content can be embedded into webpages when the provider supports embedding.

• Online videos and video players.
• Interactive maps and location information.
• Documents and presentations.
• Charts and data visualizations.
• Calendars and scheduling tools.
• Forms, surveys, and other interactive tools.

Each provider determines whether its content can be embedded and which HTML and permissions are required.

Responsive Embedded Media

Embed code often contains fixed width and height values. On responsive websites, the embedded content may need CSS so it can shrink appropriately on smaller screens.

iframe {
  max-width: 100%;
}

For media with a fixed proportion, CSS can preserve the intended shape while allowing the embed to adapt to the available width.

.media-embed {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

.media-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

The appropriate aspect ratio depends on the embedded content rather than every iframe automatically requiring a 16:9 ratio.

Embedded Media Permissions

Some embedded resources require permission to use particular browser features. An iframe's allow attribute can specify features that the embedded content is permitted to access.

<iframe
  src="https://example.com/embed/media"
  title="Embedded media"
  allow="autoplay; fullscreen"
  allowfullscreen>
</iframe>

Permissions should be limited to features the embedded resource actually needs. Provider-generated embed code may already include the appropriate permissions for that service.

Privacy and Third-Party Content

Embedding third-party content can cause the visitor's browser to connect directly to the external provider. Depending on the service, this may expose information such as the visitor's IP address or allow cookies and other storage or tracking technologies to be used.

Website owners should understand what external services are being loaded and consider applicable privacy requirements before adding third-party embeds. Some providers offer privacy-enhanced or reduced-tracking embed options.

Embedded Media Performance

Third-party embeds can require additional network requests, scripts, images, fonts, and other resources that affect page loading and performance.

When appropriate, loading="lazy" can delay loading an off-screen iframe until the visitor approaches it.

<iframe
  src="https://example.com/embed/content"
  title="Embedded content"
  loading="lazy">
</iframe>

Avoid embedding external content that provides little value to the page, particularly when it adds substantial loading or processing overhead.

Embedded Media Accessibility

An iframe should have a meaningful title that describes the purpose of the embedded resource. The media itself should also provide appropriate accessibility features, such as captions for video when needed.

Accessibility inside third-party content is largely controlled by the external provider, so the accessibility of the service should be considered when deciding whether to embed it.

Embedded Media Example

The following example demonstrates a responsive media embed. Resize the editor or open the example in the full editor window to see how the iframe adjusts while maintaining its proportions.

Embedded Media Best Practices

• Use embed code supplied by a trusted content provider when available.
• Review third-party embed code before adding it to your webpage.
• Give embedded iframes meaningful title values.
• Make embedded content responsive when necessary.
• Grant only the browser permissions required by the embedded resource.
• Consider the privacy and accessibility practices of third-party providers.
• Use lazy loading when appropriate to reduce unnecessary initial loading.
• Remove third-party embeds that add substantial overhead without providing useful content.

Summary

Embedded media allows externally hosted content to appear within an HTML webpage. Third-party services commonly provide iframe-based embed code for videos, maps, documents, presentations, forms, and other interactive resources.

When adding embedded media, consider responsive sizing, permissions, accessibility, privacy, and performance in addition to simply displaying the content.