Web Development Zero to Advanced — Class 18 of 120
HTML Audio, Video & Iframe
Modern websites contain much more than text and images.
Web pages can include:
• Audio
• Music
• Podcasts
• Video
• Tutorials
• Product demonstrations
• Maps
• External web content
• YouTube videos
• Other embedded resources
HTML provides several elements for multimedia and embedded content.
The most important elements in this class are:
<audio>
<video>
<source>
<track>
<iframe>
In this class, you will learn:
• HTML audio
• HTML video
• The <source> element
• Audio and video controls
• Autoplay
• Muted media
• Looping media
• Video poster images
• Video dimensions
• The <track> element
• Captions and subtitles
• The <iframe> element
• YouTube embedding
• Google Maps embedding concept
• Responsive video and iframe basics
• Accessibility
• Performance considerations
• Security considerations
• Common mistakes
1. What Is Multimedia?
Multimedia means using multiple types of media to present information.
Examples include:
Text
Images
Audio
Video
Animation
A web development tutorial website may contain:
Article
+
Images
+
Code
+
Video Tutorial
+
Audio Explanation
HTML provides native elements for several types of media.
2. HTML Audio
The <audio> element is used to embed audio content in a web page.
Basic example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
The controls attribute tells the browser to display audio controls.
3. Basic Audio Example
Suppose your project contains:
class-18/
│
├── index.html
└── audio.mp3
You can write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>HTML Audio</title>
</head>
<body>
<h1>My Audio</h1>
<audio controls>
<source
src="audio.mp3"
type="audio/mpeg"
>
Your browser does not support the audio element.
</audio>
</body>
</html>
The browser can display controls for playing the audio.
4. The controls Attribute
Example:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
controls normally gives the user browser-provided controls such as:
• Play
• Pause
• Volume
• Playback position
• Other browser-dependent controls
Without:
controls
the browser does not normally display its standard audio controls.
5. The <source> Element
The <source> element specifies a media resource.
Example:
<source
src="music.mp3"
type="audio/mpeg"
>
Here:
src → Location of the media file
type → Media type
6. Multiple Audio Sources
You can provide multiple sources.
Example:
<audio controls>
<source
src="music.ogg"
type="audio/ogg"
>
<source
src="music.mp3"
type="audio/mpeg"
>
Your browser does not support the audio element.
</audio>
The browser can choose a source it supports.
7. Audio Autoplay
The autoplay attribute requests automatic playback.
Example:
<audio controls autoplay>
<source
src="music.mp3"
type="audio/mpeg"
>
</audio>
However, modern browsers commonly restrict autoplay, especially when audio would play with sound.
Therefore, do not design an important website feature assuming autoplay will always work.
8. Muted Audio
Use:
muted
Example:
<audio
controls
muted
>
<source
src="music.mp3"
type="audio/mpeg"
>
</audio>
The audio starts in a muted state.
9. Loop Audio
Use:
loop
Example:
<audio
controls
loop
>
<source
src="music.mp3"
type="audio/mpeg"
>
</audio>
After reaching the end, the audio can begin again.
10. Preload Attribute
HTML provides the preload attribute.
Common values include:
preload="none"
preload="metadata"
preload="auto"
Example:
<audio
controls
preload="metadata"
>
<source
src="podcast.mp3"
type="audio/mpeg"
>
</audio>
preload is a hint to the browser about how much media information should be loaded before playback.
11. HTML Video
The <video> element embeds video content.
Basic example:
<video controls>
<source
src="video.mp4"
type="video/mp4"
>
</video>
12. Complete Video Example
Suppose your files are:
class-18/
│
├── index.html
└── tutorial.mp4
Write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>HTML Video</title>
</head>
<body>
<h1>Web Development Tutorial</h1>
<video
width="640"
controls
>
<source
src="tutorial.mp4"
type="video/mp4"
>
Your browser does not support the video element.
</video>
</body>
</html>
13. Video Controls
Example:
<video controls>
<source
src="video.mp4"
type="video/mp4"
>
</video>
The browser normally provides controls such as:
• Play
• Pause
• Volume
• Progress
• Fullscreen
• Other browser-dependent options
14. Video Width and Height
You can specify dimensions:
<video
width="640"
height="360"
controls
>
<source
src="video.mp4"
type="video/mp4"
>
</video>
Here:
Width = 640 pixels
Height = 360 pixels
For responsive websites, CSS is generally more flexible.
15. Responsive Video
Example:
<video
class="responsive-video"
controls
>
<source
src="video.mp4"
type="video/mp4"
>
</video>
CSS:
.responsive-video {
max-width: 100%;
height: auto;
}
This helps prevent the video from becoming wider than its container.
16. Video Poster
The poster attribute specifies an image that can be displayed before the video starts.
Example:
<video
controls
poster="thumbnail.jpg"
>
<source
src="tutorial.mp4"
type="video/mp4"
>
</video>
Project:
class-18/
│
├── index.html
├── tutorial.mp4
└── thumbnail.jpg
17. Video Autoplay
Example:
<video
controls
autoplay
>
<source
src="video.mp4"
type="video/mp4"
>
</video>
Browsers may block autoplay with sound.
18. Autoplay with Muted Video
A commonly used pattern is:
<video
autoplay
muted
loop
>
<source
src="background.mp4"
type="video/mp4"
>
</video>
Muted video is more likely to satisfy browser autoplay policies, although browser behavior can still vary.
19. Loop Video
Use:
loop
Example:
<video
controls
loop
>
<source
src="demo.mp4"
type="video/mp4"
>
</video>
20. Multiple Video Sources
Example:
<video controls>
<source
src="video.webm"
type="video/webm"
>
<source
src="video.mp4"
type="video/mp4"
>
Your browser does not support HTML video.
</video>
The browser evaluates the available sources.
21. Audio vs Video
Audio:
<audio controls>
Video:
<video controls>
Both can use:
controls
autoplay
muted
loop
preload
<source>
Video additionally commonly uses attributes such as:
width
height
poster
22. The <track> Element
The <track> element can provide timed text for audio or video.
It can be used for:
• Subtitles
• Captions
• Descriptions
• Chapters
• Metadata
Example:
<video controls>
<source
src="tutorial.mp4"
type="video/mp4"
>
<track
src="captions-en.vtt"
kind="captions"
srclang="en"
label="English"
default
>
</video>
23. What Is WebVTT?
A common caption file format is:
WebVTT
WebVTT = Web Video Text Tracks
The file normally uses:
.vtt
Example:
captions-en.vtt
A very small example might look like:
WEBVTT
00:00:00.000 --> 00:00:03.000
Welcome to our web development class.
00:00:03.500 --> 00:00:07.000
Today we will learn HTML video.
24. Captions vs Subtitles
They are related but not identical.
Subtitles primarily represent spoken dialogue, often for viewers who can hear the audio but need the language represented as text.
Captions can also communicate relevant non-speech audio information.
For example:
[Phone ringing]
Welcome to the course.
[Background music]
Captions are important for accessibility.
25. The <iframe> Element
iframe means:
Inline Frame
It allows another HTML page or supported external resource to be embedded inside the current page.
Basic example:
<iframe
src="page.html"
title="Example Page"
></iframe>
26. Local Iframe Example
Suppose your project contains:
class-18/
│
├── index.html
└── about.html
Inside index.html:
<iframe
src="about.html"
title="About Page"
></iframe>
The about.html document can appear inside the iframe.
27. Iframe Width and Height
Example:
<iframe
src="about.html"
width="600"
height="400"
title="About Page"
></iframe>
You can also use CSS:
iframe {
width: 100%;
border: 0;
}
28. Why Is the title Attribute Important?
An iframe should have a useful title.
Example:
<iframe
src="map.html"
title="Office Location Map"
></iframe>
The title helps users of assistive technologies understand what the embedded frame contains.
29. Embedding a YouTube Video
Video platforms commonly provide embed code using an iframe.
A typical structure looks like:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
allowfullscreen
></iframe>
Replace:
VIDEO_ID
with the appropriate video identifier.
30. YouTube Embed Workflow
A common workflow is:
- Open the YouTube video.
- Select Share.
- Choose Embed when available.
- Copy the provided embed code.
- Paste the iframe into your HTML or appropriate website editor.
This is usually better than manually guessing an embed URL.
31. Do Not Use a Normal YouTube Watch URL Directly
A normal video page URL is not the same thing as an embed URL.
For example, an iframe usually uses an embed-style URL structure rather than the standard video watch page.
When possible, use the embed code provided by the platform.
32. Responsive Iframe
A simple responsive technique for modern aspect-ratio content is:
HTML:
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Web Development Tutorial"
allowfullscreen
></iframe>
</div>
CSS:
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}
33. What Is aspect-ratio?
aspect-ratio defines a preferred width-to-height ratio.
Example:
aspect-ratio: 16 / 9;
This is common for widescreen video.
34. Embedding a Map
Map providers can provide iframe embed code.
A typical structure may look like:
<iframe
src="MAP_EMBED_URL"
width="600"
height="450"
title="Office Location Map"
loading="lazy"
></iframe>
For a real map, use the embed code provided by the map service rather than inventing the URL.
35. Lazy Loading Iframes
You can use:
loading="lazy"
Example:
<iframe
src="embedded-page.html"
title="Embedded Content"
loading="lazy"
></iframe>
Lazy loading can delay loading an off-screen iframe until it is closer to the user’s viewport.
This can help page performance in appropriate situations.
36. Iframe Security
Embedding external content requires care.
An iframe loads another document into your page.
Important considerations include:
• Trust the source you embed
• Use HTTPS resources
• Avoid unnecessary third-party embeds
• Understand permissions
• Consider privacy implications
• Use restrictive permissions where appropriate
37. The sandbox Attribute
The sandbox attribute can apply restrictions to iframe content.
Example:
<iframe
src="external-page.html"
title="External Content"
sandbox
></iframe>
A sandboxed iframe receives a set of restrictions.
Specific capabilities can be selectively allowed when necessary.
Example:
<iframe
src="trusted-app.html"
title="Embedded Application"
sandbox="allow-scripts"
></iframe>
Do not add permissions blindly. Understand what the embedded content requires.
38. The allow Attribute
Some embedded resources require specific browser features.
An iframe may contain an allow attribute.
Example structure:
<iframe
src="..."
title="Embedded Media"
allow="fullscreen"
></iframe>
Platform-generated embed code may contain additional permissions.
Use only the permissions that are actually needed.
39. allowfullscreen
For embedded video, you may see:
allowfullscreen
Example:
<iframe
src="..."
title="Video"
allowfullscreen
></iframe>
This allows fullscreen presentation where supported and permitted.
40. Not Every Website Allows Iframe Embedding
You cannot assume that every website can be displayed inside:
<iframe>
Websites can use browser security mechanisms and HTTP response policies to prevent other sites from framing their pages.
Therefore, an iframe may remain blank or show an error even when the URL works normally in a browser tab.
41. Practical Example — Course Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Web Development Course</title>
<style>
body {
font-family: Arial, sans-serif;
}
video,
audio {
max-width: 100%;
}
.video-wrapper {
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<h1>HTML Multimedia Course</h1>
<h2>Audio Lesson</h2>
<audio controls>
<source
src="lesson.mp3"
type="audio/mpeg"
>
Your browser does not support audio.
</audio>
<h2>Video Lesson</h2>
<video
controls
poster="thumbnail.jpg"
>
<source
src="lesson.mp4"
type="video/mp4"
>
<track
src="captions-en.vtt"
kind="captions"
srclang="en"
label="English"
>
Your browser does not support video.
</video>
<h2>External Video</h2>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Web Development Video Tutorial"
loading="lazy"
allowfullscreen
></iframe>
</div>
</body>
</html>
42. Practical Example — IT Company Website
Suppose you are building a website for an IT company.
You may want:
• Company introduction video
• Client testimonial video
• Office location map
• Product demonstration
• Tutorial videos
Example:
<section>
<h2>About Our Company</h2>
<video
controls
poster="company-thumbnail.jpg"
>
<source
src="company-introduction.mp4"
type="video/mp4"
>
Your browser does not support video.
</video>
</section>
<section>
<h2>Office Location</h2>
<iframe
src="MAP_EMBED_URL"
title="Our Office Location"
loading="lazy"
></iframe>
</section>
43. Performance Considerations
Audio, video, and third-party embeds can significantly increase page resource usage.
For example:
Large video files may:
• Increase bandwidth usage
• Increase loading time
• Consume mobile data
• Increase server traffic
Third-party embeds may:
• Load scripts
• Load images
• Create additional network requests
• Affect page performance
Consider:
• Compressing media
• Choosing appropriate formats
• Using poster images
• Lazy-loading suitable iframes
• Avoiding unnecessary embeds
• Hosting strategy
44. Do Not Upload Huge Video Files Without Planning
Suppose you upload:
video.mp4 = 1.5 GB
and place it directly on a page.
This can be inefficient depending on your hosting and delivery architecture.
For production websites, consider:
• Media compression
• Streaming/video platforms
• CDN delivery
• Suitable codecs and formats
• Hosting bandwidth limits
45. Accessibility for Video
Video content should be usable by as many people as possible.
Depending on the content, consider:
• Captions
• Transcripts
• Audio descriptions
• Clear controls
• Avoiding forced autoplay with sound
Example:
<track
src="captions.vtt"
kind="captions"
srclang="en"
label="English"
>
46. Accessibility for Audio
For important audio content, consider providing a text transcript.
Example structure:
<h2>Podcast Episode</h2>
<audio controls>
<source
src="episode.mp3"
type="audio/mpeg"
>
</audio>
<h3>Transcript</h3>
<p>
Welcome to today's episode...
</p>
47. Common Beginner Mistakes
Mistake 1 — Forgetting controls
Example:
<audio>
<source src="music.mp3">
</audio>
If you expect users to manually control playback, add:
controls
Mistake 2 — Wrong File Path
Suppose:
project/
│
├── index.html
└── media/
└── video.mp4
Wrong:
<video src="video.mp4"></video>
Correct:
<video src="media/video.mp4"></video>
Mistake 3 — Wrong File Name
If your actual file is:
tutorial.mp4
but HTML contains:
src="Tutorial.mp4"
this may fail on case-sensitive systems.
Mistake 4 — Expecting Autoplay to Always Work
Do not assume:
autoplay
will always start media.
Browser autoplay policies can prevent it.
Mistake 5 — Autoplaying Loud Audio
Unexpected sound can create a poor user experience.
Avoid unnecessary autoplay with sound.
Mistake 6 — Missing Iframe Title
Avoid:
<iframe src="map.html"></iframe>
Prefer:
<iframe
src="map.html"
title="Office Location Map"
></iframe>
Mistake 7 — Using Any Website URL in an Iframe
Not every site permits framing.
Use supported embed mechanisms when available.
Mistake 8 — Non-Responsive Video
Fixed-width media can overflow small screens.
Instead of relying only on:
width="1000"
consider responsive CSS:
video {
max-width: 100%;
height: auto;
}
Mistake 9 — Ignoring Captions
Important video content without captions may be inaccessible to some users.
Mistake 10 — Embedding Too Many Third-Party Resources
Every external embed may add network requests and scripts.
Use embeds only when they provide real value.
Mistake 11 — Trusting External Content Automatically
External embedded content is controlled by another source.
Consider security, privacy, reliability, and performance.
New & Difficult Words
HTML = HyperText Markup Language
Multimedia = Content combining different media types
Audio = Sound content
Video = Moving visual media, usually with optional audio
Source = Location or version of a media resource
Controls = User interface for controlling media playback
Autoplay = Request to begin media playback automatically
Muted = Media starts without audible sound
Loop = Repeats media after it ends
Preload = Hint controlling media preloading behavior
Poster = Image displayed before video playback
Track = Timed text or metadata associated with media
Caption = Text representation of dialogue and relevant audio information
Subtitle = Text representation or translation of spoken dialogue
WebVTT = Web Video Text Tracks
Iframe = Inline Frame
Embed = Display external or separate content inside a page
Responsive = Able to adapt to different screen sizes
Aspect Ratio = Relationship between width and height
Lazy Loading = Delaying loading until a resource is closer to being needed
Sandbox = Restrictions applied to iframe content
HTTPS = Hypertext Transfer Protocol Secure
CDN = Content Delivery Network
Bandwidth = Amount of data transferred over a network
Transcript = Written version of spoken audio content
Accessibility = Making content usable by people with different abilities
Important Notes
Audio:
<audio controls>
<source
src="audio.mp3"
type="audio/mpeg"
>
</audio>
Video:
<video controls>
<source
src="video.mp4"
type="video/mp4"
>
</video>
Caption:
<track
src="captions.vtt"
kind="captions"
srclang="en"
label="English"
>
Iframe:
<iframe
src="page.html"
title="Embedded Page"
></iframe>
Remember:
<audio> → Audio
<video> → Video
<source> → Media Source
<track> → Captions/Subtitles/Timed Text
<iframe> → Embedded Document or Resource
controls → Playback Controls
autoplay → Automatic Playback Request
muted → Muted State
loop → Repeat Playback
poster → Video Preview Image
loading="lazy" → Lazy Loading Hint
sandbox → Iframe Restrictions
Practice Questions
- What is multimedia?
- What does the
<audio>element do? - What does the
<video>element do? - What is the purpose of
<source>? - What does
controlsdo? - What does
autoplaydo? - Why may autoplay not work?
- What does
muteddo? - What does
loopdo? - What is
preload? - What does
posterdo? - What does
<track>do? - What is WebVTT?
- What is the difference between captions and subtitles?
- What does
<iframe>mean? - What does an iframe do?
- Why should an iframe have a title?
- Can every website be embedded using iframe?
- What does
loading="lazy"do? - What is
sandbox? - What does
allowfullscreendo? - How can you make a video responsive?
- What is an aspect ratio?
- Why can large videos hurt website performance?
- Why are captions important?
Assignment
Create a folder named:
class-18
Inside it create:
index.html
Also prepare:
audio.mp3
video.mp4
thumbnail.jpg
captions-en.vtt
Build a complete Multimedia Learning Page.
Part 1 — Audio
Add an audio lesson using:
<audio>
Include:
controls
preload="metadata"
<source>
Part 2 — Video
Add a tutorial video using:
<video>
Include:
controls
poster
<source>
<track>
Make the video responsive.
Part 3 — Captions
Create:
captions-en.vtt
Add at least three caption entries.
Part 4 — YouTube Video
Embed one YouTube video using an iframe.
Include:
title
loading="lazy"
allowfullscreen
Make the iframe responsive.
Part 5 — Local Iframe
Create:
about.html
Embed it inside index.html using:
<iframe>
Part 6 — Testing
Test:
- Audio playback
- Video playback
- Volume controls
- Captions
- Poster image
- Responsive video
- YouTube iframe
- Local iframe
- Mobile-width layout
- Browser Developer Tools
Quiz
- Which HTML element embeds audio?
Answer: <audio>.
- Which element embeds video?
Answer: <video>.
- Which element specifies alternative media resources?
Answer: <source>.
- Which attribute displays browser playback controls?
Answer: controls.
- Which attribute repeats media?
Answer: loop.
- Which attribute starts media muted?
Answer: muted.
- Which video attribute specifies a preview image?
Answer: poster.
- Which element provides captions or subtitles?
Answer: <track>.
- What does WebVTT stand for?
Answer: Web Video Text Tracks.
- Which element embeds another document?
Answer: <iframe>.
- What does iframe stand for?
Answer: Inline Frame.
- Should an iframe have a meaningful
title?
Answer: Yes.
- Can every website be embedded inside an iframe?
Answer: No.
- Which attribute can delay loading an off-screen iframe?
Answer: loading="lazy".
- Which attribute can restrict iframe capabilities?
Answer: sandbox.
Interview Questions
Q: What is the HTML <audio> element?
Answer: The <audio> element embeds sound content in an HTML document and can provide browser playback controls.
Q: What is the HTML <video> element?
Answer: The <video> element embeds video content directly into an HTML document.
Q: What is the purpose of the <source> element?
Answer: The <source> element specifies media resources and can allow the browser to choose between alternative supported sources.
Q: What is the purpose of the poster attribute?
Answer: The poster attribute specifies an image that can be displayed before video playback begins.
Q: What is the <track> element?
Answer: The <track> element provides timed text or metadata such as captions and subtitles for media.
Q: What is an iframe?
Answer: An iframe, or Inline Frame, embeds another HTML document or supported external resource inside the current document.
Q: Why might an external website fail to load inside an iframe?
Answer: The external website may use security policies that prevent its pages from being framed by other sites.
Q: How can you make a video responsive?
Answer: One common technique is to apply max-width: 100% and height: auto to the video element.
Q: Why should videos have captions?
Answer: Captions improve accessibility by providing text for spoken dialogue and other relevant audio information.
Q: Why should you be careful with autoplay?
Answer: Browsers may block autoplay, and unexpected automatic playback—especially with sound—can create a poor user experience.
Q: Why can embedded media affect website performance?
Answer: Media files and third-party embeds can increase file sizes, bandwidth usage, network requests, scripts, and page-loading work.
Class Summary
In Class 18, you learned how to add multimedia and embedded content to HTML pages.
You learned:
<audio> → Audio
<video> → Video
<source> → Media Source
<track> → Captions and Subtitles
<iframe> → Embedded Content
You also learned:
controls
autoplay
muted
loop
preload
poster
width
height
loading="lazy"
sandbox
allowfullscreen
WebVTT
Captions
Responsive Video
Responsive Iframe
YouTube Embedding
Iframe Security
Multimedia Performance
Basic audio:
<audio controls>
<source
src="audio.mp3"
type="audio/mpeg"
>
</audio>
Basic video:
<video controls>
<source
src="video.mp4"
type="video/mp4"
>
</video>
Basic iframe:
<iframe
src="page.html"
title="Embedded Content"
></iframe>
Remember:
HTML provides native audio and video elements.
Use <source> to specify media resources.
Use <track> to improve multimedia accessibility.
Use <iframe> when embedding supported external or separate documents.
Make multimedia responsive.
Consider performance, accessibility, privacy, and security before adding third-party embeds.
Next Class:
Class 19 — Semantic HTML: Header, Nav, Main, Section, Article & Footer