Embedding Content

Iframes and the embed tag

Embedding lets you pull external content – a video, a map, another web page – directly into your HTML. Two ways to do it: the <iframe> element and the <embed> tag.

Understanding iframes

An iframe (inline frame) embeds another HTML document inside your page. Think of it as a window that shows someone else’s content within yours.

Basic usage

The syntax is straightforward:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

• src: the URL of the page to embed.
• width and height: the size of the iframe.

Common use cases

• Maps: displaying a Google Map location.
• Videos: embedding from YouTube, Vimeo, and similar platforms.
• Documents: showing a PDF or other file inline.

Example: embedding a YouTube video

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

The <embed> tag

The <embed> tag is another way to include external content, mainly for media like video and audio. It was also used for Flash, which is long dead – so you’ll mostly see it for simple media embeds these days.

Basic usage

<embed src="movie.mp4" width="800" height="450">

Iframes vs <embed>

• Flexibility: iframes can embed almost any external content; <embed> is mainly for media files.
• Fallback content: iframes can contain HTML inside them that shows if the embed fails; <embed> is a void element with no fallback slot.

Example: embedding an audio file

<embed src="audio.mp3" width="300" height="50">

Best practices

Responsiveness

Fixed pixel widths break on small screens. CSS can help:

iframe, embed {
    max-width: 100%;
    height: auto;
}

Accessibility

Provide alternative content for users who can’t access the embedded media:

<iframe src="video.mp4">
  <p>Your browser does not support iframes. <a href="video.mp4">Download the video</a> instead.</p>
</iframe>

Security

Only embed content from sources you trust. An iframe loads and runs content from another origin – if that source is compromised, your page inherits the risk.

Embedding vs linking

Embedding keeps the visitor on your page. Sometimes a plain link is better – for example, if you want people to watch a video on YouTube directly, or if the embedded version strips features you need.

When embedding makes sense

Used thoughtfully, embedding lets visitors interact with maps, videos, and documents without leaving your site. Used carelessly, it slows the page down and creates accessibility headaches. Pick your embeds deliberately.

Iframes and <embed> are straightforward tools once you know their limits. Match the element to the content, keep security and accessibility in mind, and test on a phone before you ship.