Websites aren’t just about text and pictures — they can play music, show videos, and even display other websites! This is where HTML multimedia and iFrames come in.
Let’s make your webpage more exciting..
1. Embedding Audio – Let Your Website Speak or Sing
Want to play music or a voice message? Use the tag.
Syntax:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
What’s Happening:
controlsshows play, pause, and volume options.tells the browser where to find the file.
Simple Challenge:
- Upload a
.mp3file and replaceaudiofile.mp3with your file name. - Record a short welcome message and embed it on your homepage.
2. Embedding Video – Show Your Projects, Tutorials, or Introductions
Use the <video> tag to show videos directly on your site.
Syntax:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Tips:
- Add
autoplay,loop, ormutedif needed. - Always provide a fallback text.
Task - Embed a tutorial video or your personal intro video using the <video> tag.
3. Using <iframe> – Insert Websites, Maps, or YouTube Videos
An iframe lets you embed another web page inside your own.
Syntax:
<iframe src="https://example.com" width="600" height="400" title="Example Site"></iframe>
Examples:
- Embed a YouTube Video:
- Embed a Google Map:
When to Use Each
Putting all together
ACTION PLAN
Continuous practice is key! Click HERE to jump into our online compiler and master all the code you see.
Create a multimedia HTML page with:
✅ A welcome audio message.
✅ A video explaining your project.
✅ A YouTube embed or Google Map using iframe.
Note - In the compiler, you can switch between CODE & DISPLAY as shown below:
