Skip to main content
HTML for Beginners
CHAPTER 11 Beginner

HTML iframe and Embedding Content

Updated: May 10, 2026
5 min read

# HTML iframe and Embedding Content

1. Introduction

An <iframe> (Inline Frame) allows you to embed another HTML document inside your current HTML document. It's like cutting a rectangular window in your webpage to look at another webpage. We use this heavily for embedding YouTube videos and Google Maps.

2. Learning Objectives

  • Use the <iframe> tag to embed external websites.
  • Embed YouTube videos properly.
  • Embed Google Maps.
  • Understand basic security attributes.

3. Detailed Explanations

The <iframe> Basics

You specify the URL of the external page in the src attribute.
html
12 
<!-- Embeds the Wikipedia homepage -->
<iframe src="https://www.wikipedia.org" width="100%" height="400"></iframe>

Removing the Border

By default, iframes have an ugly border. Use CSS or the frameborder attribute to remove it.
html
1 
<iframe src="https://example.com" style="border:none;" title="Example Site"></iframe>

*Note: Always include a title attribute for accessibility so screen readers know what is in the iframe!*

Embedding YouTube Videos

YouTube makes this easy. Right-click any video and click "Copy embed code".
html
123456789 
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/tgbNymZ7vqY" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

*Notice the allowfullscreen attribute? That lets the user expand the video to their whole monitor.*

Security: sandbox

If you are embedding a site you don't fully trust, you can restrict what the iframe can do (like preventing it from running JavaScript or opening popups) using the sandbox attribute.
html
1 
<iframe src="https://sketchy-site.com" sandbox></iframe>

4. Mini Project: Travel Info Card

Let's build a UI component that shows a destination and an embedded map!
html
123456789101112131415 
<div class="travel-card">
    <h2>Visit Paris</h2>
    <p>The capital of France is known for its cafe culture and the Eiffel Tower.</p>
    
    <!-- Embedded Google Map -->
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.94722687619!2d2.277019841665155!3d48.85883773943405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2sus!4v1699999999999!5m2!1sen!2sus" 
        width="100%" 
        height="250" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

5. MCQs

Q1: Which attribute is required to define the URL of the page you want to embed in an iframe? A) href B) link C) src D) url *Answer: C*

6. Summary

iframes are powerful tools for bringing third-party services (Maps, YouTube, Spotify players) into your website without having to build them from scratch. Always remember to give your iframes a title for accessibility!

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Audio and Video Elements
Next Chapter HTML Meta Tags and SEO Basics

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1