MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Topic 10.3 in Chapter 10: Media!
In the previous lessons, you learned how to add local photos with <img> and host your own videos with <video>.
Now imagine you want to:
How do you display content from an entirely different website inside your own page?
The answer is the HTML <iframe> element!
Think about your school classroom:
Sitting at your study desk, there is a large glass window in the wall. Through that window, you can watch what is happening outside on the school sports field — the green grass, the football match, the clouds in the sky. You are sitting in the classroom, but you can see a view of the outside world!
In the Principal's office, there is a television monitor showing live CCTV feeds from the school gate, science lab, and library. The monitor is a small screen inside the room that shows external video feeds live!
An <iframe> (Inline Frame) is literally that glass window or CCTV screen on your webpage! It cuts out a rectangular area on your page and streams an entirely different website or video player directly inside it!
<iframe> 📐The <iframe> tag requires an opening tag and a closing tag:
src: The URL address of the webpage or video you want to embed inside the frame.width & height: The dimensions in pixels (e.g. width="600" height="400").title (⚠️ Mandatory for Accessibility!): Screen reader software announces this title so visually impaired students know what is inside the frame (e.g. title="School Location Map").Many beginners make this mistake: they copy the normal YouTube address from their browser (youtube.com/watch?v=kUMe1FH4CHE) and paste it into src.
When they open their webpage, YouTube shows an error: "Refused to connect"!
YouTube blocks normal watch links from loading inside iframes for security. Instead, you must use YouTube's special /embed/ URL:
allowfullscreen: Allows students to click the square icon and watch the video in full-screen mode!allow="...": Grants permissions for motion sensors, autoplay, and picture-in-picture mode.Every school, college, or business website needs a map on its "Contact Us" page so parents and students can find the campus:
loading="lazy" ⚡If your page contains 3 embedded YouTube videos and a Google Map, downloading all four embedded pages at once will slow down your website and eat up student mobile data!
Add loading="lazy":
The browser will wait to download the iframe until the student actually scrolls down near it. If they never scroll down, zero data is wasted!
sandbox Shield 🛡️What if you are embedding a page from a third-party website, and you want to make sure it cannot:
HTML5 introduced the sandbox attribute — a digital bulletproof glass shield!
sandbox Permission Tokens:allow-scripts: Allows JavaScript to execute inside the iframe.allow-same-origin: Allows the iframe to maintain its cookies and domain storage.allow-forms: Allows form submission inside the frame.allow-popups: Allows the iframe to open new tabs.Here is a complete, working HTML webpage combining responsive iframes, YouTube lecture embeds, and location maps:
| ❌ Common Mistake | ✅ Best Practice | Why It Matters |
|---|---|---|
Using a standard YouTube watch URL (watch?v=...) in src. | Always use the /embed/ URL format (youtube.com/embed/...). | Normal watch links are blocked by YouTube security policies and will fail with a blank box. |
Forgetting the title attribute on <iframe>. | Always provide a descriptive title attribute. | Accessibility screen readers require title to announce what is inside the embedded frame. |
| Loading heavy maps and videos above the fold without lazy-loading. | Add loading="lazy" to all iframes below the screen fold. | Saves mobile bandwidth and speeds up page load for students on 4G connections. |
Omitting allowfullscreen on video players. | Always include allowfullscreen on YouTube/Vimeo iframes. | Without this attribute, users are locked to the tiny iframe dimensions and cannot maximize the video. |
Writing <iframe> as a self-closing tag (<iframe src="..." />). | Always write opening and closing tags: <iframe>...</iframe>. | <iframe> is not a void element. Self-closing will break surrounding HTML layout! |
<iframe> (Inline Frame) embeds an external webpage, video player, or interactive map directly inside your page.src points to the document or media URL to display.https://www.youtube.com/embed/VIDEO_ID URL structure.allowfullscreen enables full-screen video playback.title="..." is mandatory for accessible screen reader navigation.loading="lazy" delays downloading the frame until the visitor scrolls near it.sandbox provides a powerful security shield to restrict untrusted scripts and popups.Test your understanding with these multiple-choice questions:
https://www.youtube.com/watch?v=12345 fail to load inside an <iframe>?sandbox attribute on an <iframe>?title attribute on every <iframe>?Open VS Code and create a file named school-virtual-tour.html.
Build an Interactive School Virtual Tour Page:
<iframe src="https://www.youtube.com/embed/kUMe1FH4CHE" ...>.allowfullscreen, loading="lazy", and an accessible title.loading="lazy", width="100%", and height="300".sandbox="allow-scripts" to demonstrate safe framing.© 2026 and school address.Open the file in your browser to verify that both your video player and interactive map stream smoothly!
In the next lesson, we will continue your web development journey with HTML5 Graphics: SVG & Canvas (Media).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Audio & Video | HTML5 Graphics: SVG & Canvas |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.