Book 3 · Chapter Seven — Embeds & iframes

Part One

What Is an iframe?

An <iframe> (inline frame) is a window inside your page that loads another web page — or any other HTML content — from a different source. When you embed a YouTube video or a Google Map in an article, you are inserting an iframe that points to YouTube or Google's servers.

The essential attribute is src: the URL of the page to embed. You also set width and height. Most embed services (YouTube, Google Maps, Datawrapper) generate ready-to-copy iframe code for you — you just paste it into your HTML.

Note on this playground: Some external services block embedding in third-party iframes for security reasons. In the exercises below, we will use sources that allow embedding. In your final published article, you can embed any service that provides an embed code.

Part Two

Embedding a Map

Location is central to reporting. A map tells readers precisely where an event occurred. Google Maps, OpenStreetMap, and many other services generate embed codes you can paste directly into your article.

To get an embed code from Google Maps: search for a location → click Share → select "Embed a map" → copy the <iframe> code.

Below is an example embedding an OpenStreetMap frame, which allows embedding freely.

HTML · Try it — embed a map

HTML

CSS

Live Preview

Part Three

Embedding a Video

To embed a YouTube video, open the video on YouTube, click Share → Embed, and copy the iframe code. The URL will look like https://www.youtube.com/embed/VIDEO_ID.

A standard YouTube embed has width="560" height="315". To make it responsive — filling the full width of your article — use CSS rather than fixed pixel values.

HTML · Try it — responsive video embed

HTML

CSS

Live Preview

The 56.25% trick: The padding-bottom: 56.25% technique is the standard way to make a 16:9 video fill its container responsively. The iframe is then absolutely positioned to fill the padded area completely. This works because percentage padding is calculated relative to the width of the element.

Part Four

Data Visualisations — Datawrapper

Datawrapper is a free tool used by major news organisations worldwide — including the New York Times, Der Spiegel, and The Guardian — to create embeddable charts, maps, and tables from data. You upload a spreadsheet or paste data, design the chart, and it gives you an iframe embed code.

The embed code looks like this:

HTML · Try it — a Datawrapper-style embed pattern

HTML

CSS

Live Preview

To use Datawrapper for real: create a free account at app.datawrapper.de, upload your data, design your chart, click "Publish & Embed", and paste the iframe code into your article.

What you have learned in this chapter: how to use <iframe> to embed maps, videos, and data visualisations; how to make video iframes responsive; and how to cite embedded content properly with <figcaption>. Next: the final project — your complete article page.

Chapter Navigation

Move between chapters.

Previous: Chapter 6 Next: Chapter 8 — The Article Page