Embedding YouTube & Other Content
Drop a YouTube video or a Google Map into your page with an iframe.
What you will learn
- Embed external content with <iframe>
- Embed a YouTube video and a map
- Know the safety considerations
The iframe
An <iframe> (inline frame) is a window that shows another web page inside your page — how you embed YouTube, Google Maps, payment widgets and more.
<iframe width="360" height="200"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
allowfullscreen></iframe>The src is a special YouTube “embed” address that points to one video. width and height set the player size, title describes it for screen readers, and allowfullscreen lets the viewer expand it. The whole YouTube player appears right inside your page.
Note: Output: A 360×200 YouTube player embedded in the page, ready to play — with its own play and full-screen buttons.
Platforms give you the iframe code to copy. On YouTube it is Share → Embed; on Google Maps it is Share → Embed a map. Paste their snippet into your HTML.
Watch out: Only embed content from sources you trust — an iframe runs someone else’s page inside yours. Many sites also block being embedded, so not every URL will work.
Note: Old plug-ins like Flash and Java applets are dead. Modern HTML5 <video>, <audio> and <iframe> replaced them entirely.
Tip: Always add a title to your iframe describing its content — screen readers rely on it.
Q. Which element embeds another web page (like a YouTube video) inside yours?
✍️ Practice
- Embed a YouTube video of your choice using its official embed code.
- Go to Google Maps, find your city, and embed the map on a page.
🏠 Homework
- Build a “Find Us” page with an embedded map and the institute address beside it.