🎓 A1Learner
🔍

HTML Media Embeds

An HTML media embed is a frame that shows media hosted on another site inside a page. The examples use a small built-in test page, so they work without a network.

A frame with a test page

The srcdoc attribute holds a small page inside the frame. That inner page is a separate document from the page around it.

<h2>Watch the demo</h2>
<iframe srcdoc="<p>Demo video player</p>" title="Demo video"></iframe>
<p>The player sits inside the frame above.</p>

A real embed uses a web address

A hosted video gives an address for its player. The src attribute holds that address, and the frame loads the player from the host.

<iframe src="https://videos.example.com/embed/42" title="Cooking demo"></iframe>
<p>A hosted player would load here.</p>

A title names the frame

The title attribute gives the frame a name that assistive tools can read. A clear title says what the media is.

<iframe srcdoc="<p>Song player</p>" title="Song player"></iframe>
<p>Press play to hear the song.</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Media Embeds</title>
</head>
<body>
<h1>Our cooking show</h1>
<p>Watch the latest episode below.</p>
<iframe srcdoc="<p>Episode 4 player</p>" title="Cooking show episode 4" width="320" height="180"></iframe>
<p>Episode 5 arrives next week.</p>
</body>
</html>

Key points

  • Embed: media from another site shown inside a page
  • Host: the site that stores the media and serves its player
  • An embed borrows a player from the host instead of copying the media file
  • srcdoc: an attribute that holds a whole small page inside a frame
  • Width and height attributes set the size of the frame

In this example, a heading and a paragraph open the page. An iframe follows and holds a small test page through its srcdoc attribute. The width and height attributes give the frame its size. A real embed would swap srcdoc for the host address in a src attribute. The closing paragraph sits below the frame as normal page text.

Note

The embedded page is a separate document, so styles from the outer page do not reach inside it

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does a real media embed point its iframe at?