Embedding Content in HTML

Embed YouTube videos, maps, PDFs and other content safely and responsively with iframe, object and embed, using privacy-friendly and fast-loading techniques.

Lesson 29 of 44Intermediate15 min read

Videos, maps, social posts, slides and documents often live on another service, and the easiest way to show them on your page is to embed them. You've already seen the basics in the iframes lesson; this lesson focuses on the embeds people actually ask about most: YouTube videos, maps and PDF documents, and on doing it the right way for speed, privacy and phones.

Embeds are heavy. A single YouTube player can download over a megabyte of scripts before anyone presses play, and a map loads dozens of images. Done carelessly, a few embeds make a page slow, jump around as they load, and overflow narrow screens. Done well, they load only when needed, keep a fixed shape, and scale to any screen width.

You'll also meet the <object> and <embed> elements, which display files such as PDFs directly, and learn what to show as a fallback when a browser or a privacy setting blocks the content.

Embedding a YouTube video

HTML
<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="How to make sourdough bread"
  loading="lazy"
  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>
  • Use the embed URL (/embed/VIDEO_ID), not the normal watch page URL.
  • The youtube-nocookie.com domain is YouTube's privacy-enhanced mode: it doesn't set tracking cookies until the visitor plays the video.
  • Add ?start=90 to start at 1 minute 30 seconds, or ?rel=0 to show related videos from the same channel only.
  • loading="lazy" delays the whole player until it's scrolled near.

Responsive embeds

Embed codes come with fixed width and height attributes, which overflow on phones. Make them fluid with CSS:

CSS
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

aspect-ratio keeps the frame's shape as the width changes and reserves the right amount of space before it loads, so the page doesn't jump. Older tutorials use a "padding-top: 56.25%" wrapper to do the same thing; aspect-ratio replaces that trick.

Maps, PDFs, object and embed

  • Maps: Google Maps (Share, then Embed a map) and OpenStreetMap (Share, then HTML) both give iframe code. Add a title and loading="lazy", and also include the address as text so it's readable without the map.
  • PDFs: the simplest option is a link, <a href="menu.pdf">Download our menu (PDF, 2 MB)</a>. To show it inside the page, use <object data="menu.pdf" type="application/pdf"> with a link inside as the fallback, or an <iframe>. Many phones won't display embedded PDFs, so always offer the link.
  • <embed> is a simpler, older element with no fallback content. Prefer <object> or <iframe>.

HTML Embedding Syntax

Embed patterns

<iframe class="video" src="https://www.youtube-nocookie.com/embed/ID?start=30" title="Video title" loading="lazy" allowfullscreen></iframe>
<iframe src="MAP_EMBED_URL" title="Map of our shop" loading="lazy"></iframe>
<object data="guide.pdf" type="application/pdf" width="100%" height="500">
  <a href="guide.pdf">Download the guide (PDF)</a>
</object>
.video { width: 100%; aspect-ratio: 16 / 9; border: 0; }

HTML Embedding Summary

  • Embed YouTube with its /embed/ URL; youtube-nocookie.com improves privacy.
  • Always add a title and loading="lazy" to embedded frames.
  • Use width: 100% and aspect-ratio to make embeds responsive without layout jumps.
  • Give PDFs and maps a plain link or text address as a fallback.
  • Prefer <object> or <iframe> over <embed>, which has no fallback.

HTML Embedding Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A responsive video

<style>
  .video { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; }
</style>
<h3>Watch: what is HTML?</h3>
<iframe class="video"
  src="https://www.youtube-nocookie.com/embed/UB1O30fR-EE"
  title="Video: HTML crash course for beginners"
  loading="lazy"
  allow="encrypted-media; picture-in-picture; fullscreen"
  allowfullscreen></iframe>
<p>Prefer reading? See our <a href="/html/html-introduction">HTML introduction</a>.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The frame fills the available width up to 560px, and aspect-ratio keeps it 16:9.
  2. Line 6The privacy-enhanced embed address.
  3. Lines 7 to 8A descriptive title and lazy loading.
  4. Line 11A text alternative for people who can't or don't want to watch.
Example 2

A map with a text address

<style>.map { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; border: 0; }</style>
<h3>Visit our shop</h3>
<address>12 Market Street, Leeds LS1 6DT</address>
<iframe class="map"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-1.5460%2C53.7950%2C-1.5380%2C53.7990&layer=mapnik"
  title="Map showing our shop on Market Street, Leeds"
  loading="lazy"></iframe>
<p><a href="https://www.openstreetmap.org/#map=17/53.797/-1.542">Open a larger map</a></p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3The address is real text, readable even if the map doesn't load.
  2. Line 5OpenStreetMap's embed URL.
  3. Lines 6 to 7Title and lazy loading, as for any iframe.
  4. Line 8A link to a full-size map is handy on phones.
Example 3

A video facade that loads on click

<style>
  .facade { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; background: #111 center / cover url('https://picsum.photos/seed/film/480/270'); border-radius: 10px; }
  .facade span { position: absolute; inset: 0; margin: auto; width: 64px; height: 44px; border-radius: 10px; background: #dc2626; color: white; font-size: 22px; line-height: 44px; }
  .facade + iframe, .player { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; border: 0; }
</style>
<button class="facade" type="button" aria-label="Play video: HTML crash course"><span>▶</span></button>
<script>
  document.querySelector('.facade').addEventListener('click', (e) => {
    const frame = document.createElement('iframe');
    frame.className = 'player';
    frame.title = 'Video: HTML crash course';
    frame.allow = 'autoplay; encrypted-media; fullscreen';
    frame.src = 'https://www.youtube-nocookie.com/embed/UB1O30fR-EE?autoplay=1';
    e.currentTarget.replaceWith(frame);
  });
</script>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2A button with a thumbnail background stands in for the player.
  2. Line 6The button has an accessible name describing the video.
  3. Lines 8 to 14Only when clicked is the real iframe created and swapped in, with autoplay.

Common HTML Embedding Mistakes

Using the watch URL

Don't
<iframe src="https://www.youtube.com/watch?v=UB1O30fR-EE"></iframe>
Do
<iframe src="https://www.youtube-nocookie.com/embed/UB1O30fR-EE" title="Video: HTML crash course"></iframe>

The normal page refuses to load inside a frame.

Fixed-size embeds on phones

Don't
<iframe width="900" height="500" src="..."></iframe>
Do
<iframe style="width: 100%; aspect-ratio: 16 / 9;" src="..." title="..."></iframe>

A 900px frame forces sideways scrolling on a 390px phone.

A PDF with no fallback

Don't
<embed src="menu.pdf" width="600" height="800">
Do
<object data="menu.pdf" type="application/pdf" width="100%" height="600">
  <a href="menu.pdf">Download the menu (PDF, 1.2 MB)</a>
</object>

Many phones can't show embedded PDFs; the link always works.

HTML Embedding in Real Projects

Embeds on real sites

Restaurants embed maps and PDF menus, schools embed lesson videos, and product pages embed demo videos. Fast sites such as news publishers use click-to-load facades for every third-party player, and privacy laws in many countries push sites towards youtube-nocookie embeds and consent before loading tracking content.

HTML Embedding Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make the video frame load only when it's near the viewport.

<iframe src="https://www.youtube-nocookie.com/embed/abc" title="Demo" loading=""></iframe>
Multiple choiceeasy

Which YouTube address should go in an iframe's src?

Multiple choicemedium

Which CSS property keeps an embed's shape as its width changes?

Multiple choicemedium

Why add a download link inside an <object> showing a PDF?

Fix the bugmedium

Fix this embed: use the embed URL on youtube-nocookie.com (video id abc123), add a title, lazy loading, and make it responsive with the .video class.

<style>.video { width: 100%; aspect-ratio: 16 / 9; border: 0; }</style>
<iframe src="https://www.youtube.com/watch?v=abc123" width="900" height="500"></iframe>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Uses the nocookie embed URL
  • Has a title
  • Lazy loaded
  • Uses the responsive class

HTML Embedding Quiz

5 questions to check what you learned.

  1. What does youtube-nocookie.com do?

    • Removes adverts
    • Makes videos load faster
    • Hides the YouTube logo
    • Avoids setting tracking cookies until the video is played

  2. How do you start an embedded YouTube video at 2 minutes?

    • ?time=2m
    • ?start=120
    • #120
    • ?seek=2

  3. Why include the address as text next to an embedded map?

    • Maps require it
    • To improve map accuracy
    • So it's readable if the map doesn't load and for screen-reader and search engine users
    • It isn't useful

  4. What is a facade for an embedded video?

    • A lightweight thumbnail and play button that loads the real player only on click
    • A fake video
    • A video filter
    • A CSS animation

  5. Why is <embed> usually avoided for PDFs?

    • It's not valid HTML
    • It only works with images
    • It has no fallback content, so nothing helpful shows when the PDF can't be displayed
    • It requires JavaScript

HTML Embedding Challenge

A responsive tutorial embed

Create:

  1. A <style> rule for .embed with width: 100% and aspect-ratio: 16 / 9
  2. An iframe with class embed, a youtube-nocookie embed URL, a title and loading="lazy"
  3. A paragraph with a text link to the same topic, as an alternative
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The embed is full width with a 16:9 ratio
  • Uses a nocookie embed URL
  • Has a title and lazy loading
  • A text link alternative

Related HTML topics

28IframesEmbed videos, maps and other web pages inside your page.32Audio & VideoPlay video and sound natively with controls, posters and captions.41Page SpeedMake pages load faster with HTML alone: lazy-load images and iframes, set image sizes to stop layout shifts, preload key files, preconnect to other servers and load scripts without blocking.
Esc
↑↓ to navigateEnter to open