Embedded Content

Integrate external documents, videos, and interactive widgets into your website.

`Inline Frames`

The <iframe> is used to display a web page within a web page. It is the gold standard for third-party integrations.

<iframe> : Creates an inline frame that embeds an independent HTML document.
src : Specifies the address (URL) of the page to embed.
width & height : Determines the size of the frame on your page.
Embedding YouTube : Most video platforms provide an iframe code snippet to use their players natively.

YouTube Embed Example

The standard way to embed a video player from an external provider like YouTube.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allowfullscreen>
</iframe>

`Frame Security`

Embedding external sites can be risky. Modern HTML provides tools to keep your main site safe.

sandbox attribute : Enables an extra set of restrictions for the content in the iframe (e.g., preventing popups or scripts).
allow-scripts : A sandbox value that specifically allows the embedded page to run JavaScript.
allow-forms : A sandbox value that allows the embedded page to submit forms.

Secure Sandboxed Iframe

Using the sandbox attribute to restrict what the embedded content can do.

<iframe 
  src="https://example.com" 
  sandbox="allow-scripts allow-forms"
  width="100%" 
  height="300">
</iframe>

`General Embedded Objects`

When you need to embed something other than a webpage like a PDF or a plugin, these tags are the solution.

<embed> : Defines a container for an external resource, such as a third-party app or interactive widget.
<object> : A more powerful container that can hold images, PDFs, or other HTML documents.
PDF embedding : Using <object> or <embed> allows users to view documents without leaving your site.
External widgets : These tags are often used for weather widgets, stock tickers, or social media feeds.

PDF Document Embedding

Using the object tag to display a PDF file with a download fallback.

<object data="manual.pdf" type="application/pdf" width="100%" height="500px">
  <p>Unable to display PDF. <a href="manual.pdf">Download instead</a>.</p>
</object>

Knowledge Check

1. Which element is the most common way to embed another HTML document into your current page?

2. What does the 'sandbox' attribute do for an iframe?

3. Which tag is versatile enough to embed images, PDFs, or even Flash (legacy)?

4. To embed a YouTube video, which attribute is used to provide the video URL?

5. Why would you use <embed> instead of <iframe>?

6. What happens to content inside an <object> tag if the browser cannot render the data?

Previous Next