The iframe Element: Embedding External Content
Have you ever visited a web page and seen a YouTube video or a Google Map right inside the page? That’s usually done with an HTML element called <iframe>.
In this beginner-friendly guide, you’ll learn:
- What an
<iframe>is and why it’s useful - How to embed a simple web page
- How to control the size and basic behavior of an
<iframe> - How to embed a YouTube video safely
No prior coding experience is needed. You’ll copy small code examples, paste them into a file, and see them work in your browser.
What is an iframe?
An iframe (short for inline frame) lets you display another web page inside your current web page.
Think of it like a window or picture frame. The surrounding page is your wall, and the iframe is a frame showing content from another place.
Some common uses:
- Embedding YouTube videos
- Showing a Google Map
- Displaying a form or widget from another site (like a newsletter signup)
The basic HTML tag looks like this:
<iframe src="https://example.com"></iframe>
<iframe>is the elementsrc(short for "source") is the address (URL) of the page you want to display
Getting Ready: Your First HTML File
Before we start, you’ll need:
- A simple text editor (Notepad on Windows, TextEdit on Mac in plain-text mode, or any code editor)
- A web browser (Chrome, Firefox, Edge, Safari, etc.)
Steps
- Create a new file and name it:
iframe-demo.html - Paste the following basic HTML structure into it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe Demo</title>
</head>
<body>
<h1>Testing the iframe Element</h1>
<!-- We'll add iframe code here soon -->
</body>
</html>
- Save the file.
- Double-click the file to open it in your web browser.
You should see a page with the heading: “Testing the iframe Element”.
You’re ready to embed content!
Example 1: A Basic iframe
Let’s embed an external web page inside our page.
Step-by-step
Add this code inside the <body> tag, under the <h1> heading:
<!-- Basic iframe example -->
<iframe
src="https://example.com" <!-- The page we want to show -->
></iframe>
Your full <body> might now look like this:
<body>
<h1>Testing the iframe Element</h1>
<!-- Basic iframe example -->
<iframe
src="https://example.com" <!-- The page we want to show -->
></iframe>
</body>
What happens?
- Save the file and refresh your browser.
- You should see a small box with the content of
https://example.cominside it.
At this stage, the iframe might look very small or plain. Next, we’ll control its size so it’s easier to see.
Example 2: Controlling Size with width and height
The <iframe> element accepts width and height attributes. These tell the browser how big to make the frame.
Update your iframe like this:
<!-- iframe with width and height -->
<iframe
src="https://example.com" <!-- Content page -->
width="600" <!-- 600 pixels wide -->
height="400" <!-- 400 pixels tall -->
></iframe>
Explanation
width="600"makes the iframe 600 pixels wideheight="400"makes it 400 pixels tall
Save and refresh the page. You should see a larger, clearly visible window showing example.com.
Try it yourself
- Change
width="600"towidth="100%"and refresh.- Now the iframe will stretch to the full width of the page.
- Change
height="400"toheight="200"and see how it changes.
Experimenting like this builds your confidence and helps you understand how HTML affects what you see.
Example 3: Making the iframe Safer with Attributes
Sometimes, iframes can do more than we want, like run scripts, open popups, or access data. To increase safety, HTML gives us a helpful attribute called sandbox.
Add sandbox and a simple border style to see things more clearly:
<!-- Safer iframe with sandbox and a visible border -->
<iframe
src="https://example.com"
width="600"
height="400"
sandbox <!-- Restricts what the iframe can do -->
style="border: 2px solid #333;" <!-- Adds a dark border -->
></iframe>
What sandbox does (simple version)
By using sandbox without any extra values, you:
- Block most scripts inside the iframe
- Prevent the iframe from opening new windows
- Add a general layer of protection
For now, think of sandbox as a safety switch you can turn on to be more secure, especially when you don’t fully control the content inside the iframe.
Tip: Some sites may not work correctly in a strict sandbox. That’s normal. For beginners, it’s fine just to know the option exists.
Example 4: Embedding a YouTube Video
One of the most common uses of iframes is embedding a YouTube video.
Get the embed code from YouTube
- Go to YouTube and open any video.
- Click the Share button below the video.
- Click Embed.
- Copy the code you see. It will look similar to this:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
VIDEO_IDis a unique code for each video. YouTube fills this in for you.
Add it to your page
Paste the YouTube iframe under your previous iframe, like this:
<body>
<h1>Testing the iframe Element</h1>
<!-- Example.com iframe -->
<iframe
src="https://example.com"
width="600"
height="400"
sandbox
style="border: 2px solid #333;"
></iframe>
<h2>Embedded YouTube Video</h2>
<!-- YouTube video iframe -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID" <!-- Replace VIDEO_ID -->
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</body>
What you’ll see
- Save and refresh the page.
- You should see your main heading, the example.com iframe, and below that, the YouTube player ready to play.
This is exactly how many blogs and websites show videos: by embedding them with an iframe.
Try It Yourself: Create a Small Embedded Gallery
Now it’s your turn to be creative.
- Keep the YouTube iframe.
- Add another iframe for any public page you like (for example, your favorite blog or a documentation page).
- Give each iframe its own heading so visitors know what they’re looking at.
Here’s a simple starting point:
<h2>My Favorite Website</h2>
<iframe
src="https://example.com"
width="100%"
height="300"
style="border: 1px solid #aaa;"
></iframe>
<h2>My Favorite Video</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
Change the URLs, sizes, and borders to match your taste. This small “embed gallery” is already a tiny web project you built yourself.
Important Notes and Good Practices
As you experiment with iframes, keep these points in mind:
- Not all sites allow embedding. Some websites block iframes for security or privacy reasons. If an iframe stays blank or shows an error, that site may not allow embedding.
- Use trusted sources. Only embed content from websites you trust, especially if others will visit your page.
- Keep accessibility in mind. Use helpful titles and headings so people using screen readers (assistive tools) know what each embedded frame contains.
Example of an iframe with a clear title:
<iframe
src="https://example.com/map"
width="600"
height="400"
title="Store locations map"
></iframe>
The title helps describe what the iframe shows.
Quick Recap and What’s Next
You’ve just learned how to:
- Use the
<iframe>tag to display another page inside your own - Control the iframe size with
widthandheight - Add simple safety and style with
sandboxandstyle - Embed a YouTube video using iframe code from the Share > Embed option
If this felt like a lot, that’s okay. Even getting one iframe to show up on your page is a real win.
Next steps you can try:
- Experiment with different websites in your iframe
src - Adjust sizes to see how they affect the layout
- Add CSS (styles) to make your iframes match your page design
Every small experiment you try builds your skills. Keep playing, keep tweaking, and you’ll be surprised how quickly embedding external content becomes second nature.
