HTML iframe: Embedding Maps, Videos and Other Pages Safely

An iframe (inline frame) shows another web page inside a rectangle on your page. It is how sites embed videos, maps, payment forms, social media posts and documents.

A basic iframe#

<iframe src="https://example.com/" width="600" height="400"
        title="Example Domain homepage" loading="lazy"></iframe>

Embedding videos and maps#

Video and map services give you ready-made iframe code. For example, the Share → Embed option under a video gives code shaped like this:

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Video title here"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>

• allow grants the embedded page specific browser features, such as autoplay or picture-in-picture.
• allowfullscreen lets the player go full screen.
• Replace the generic title with what the video actually is.

Google Maps works the same way: Share → Embed a map gives you an iframe to paste.

srcdoc: HTML written in the attribute#

Instead of a URL, srcdoc takes the HTML to display directly:

<iframe title="Greeting card" width="300" height="100"
        srcdoc="<h1 style='color:purple'>Happy Birthday!</h1>"></iframe>

This site's own Result boxes are iframes that use srcdoc, which is why lesson examples cannot affect the rest of the page.

Security: sandbox#

An embedded page is someone else's code running inside your page. The sandbox attribute applies strict restrictions: no scripts, no forms, no pop-ups, no navigating your page. You then add back only what is needed:

<iframe src="https://widgets.example.com/poll"
        title="Reader poll"
        sandbox="allow-scripts allow-forms"></iframe>

Why some sites will not load in an iframe#

Many sites (banks, email providers, most large websites) send a header (X-Frame-Options or a Content Security Policy frame-ancestors rule) that tells browsers not to display them inside other sites. This protects users from clickjacking, where an attacker hides a real site under a fake page to trick people into clicking buttons. If an iframe shows an error or stays blank, this is usually the reason, and only the embedded site can change it.

Privacy and performance#

• Each iframe loads a full web page, with its own scripts and styles. Several embeds can make a page slow; use loading="lazy".
• Embedded players and maps can set cookies and track visitors. Mention them in your privacy policy, and use privacy-enhanced options where a service offers one.

Practice#

<iframe src="https://example.com/" title="Example Domain homepage"
        style="width: 100%; height: 300px" loading="lazy" sandbox></iframe>

Key takeaway#