How to embed a YouTube video, a map or another site

Short answer

Insert an <iframe> with the page address. It needs a size and a title for screen readers:

<iframe src="https://example.com" title="Example Domain" width="320" height="180" style="border: 1px solid silver;"></iframe>

Videos and maps

YouTube, map services and social networks provide ready code: the Share button → Embed. That is an <iframe> with the address of the embeddable page — on YouTube it contains /embed/ plus the video id. Copy it, then adjust the size and add title and loading="lazy" if they are missing.

Lazy loading

An embedded player or map pulls in a lot of scripts. loading="lazy" defers loading until the visitor scrolls to it:

<p style="height: 260px;">Scroll down ↓</p>
<iframe src="https://example.com" title="Example Domain" width="320" height="180" loading="lazy"></iframe>

Restricting the embedded page

The sandbox attribute without a value forbids scripts, forms and pop-ups inside the iframe. The needed abilities are listed in it as words, for example sandbox="allow-scripts".

Common mistake

src gets the regular address of a video or page, for example the link from the YouTube address bar. Most large sites forbid showing themselves in a frame, and an error appears instead of the content. Take the address from the Embed code — on YouTube it contains /embed/.