Chapter 10 | Multimedia Content

Audio, Video & Embeds

Modern websites use audio, video, YouTube videos, maps and other embedded content. In this chapter, you will learn how to add multimedia content using HTML.

Start Learning Try Media

audio

Add sound, podcast, voice note or learning audio.

video

Add video lessons, demo clips and course previews.

source

Provide multiple file formats for better browser support.

iframe

Embed YouTube videos, maps and external pages.

Learning Objectives

After This Chapter, You Will Understand

This chapter teaches how to add multimedia and embedded content in webpages.

Audio

Add audio files with controls, source and supported formats.

Video

Add video with controls, poster, autoplay, muted and loop.

Iframe

Embed external content like YouTube and Google Maps.

Responsive Media

Understand the need for mobile-friendly embeds.

HTML Audio

Adding Audio with audio Tag

The audio tag is used to add sound files such as voice notes, lessons and music.

1 Basic Audio Syntax

The <audio> tag is used to embed audio files. The controls attribute shows play, pause and volume controls.

<audio controls>
<source src="lesson.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>

Use Case: Audio can be used for language learning, pronunciation, recorded explanation and meditation lessons.

Audio Player Preview

Sample Audio Player with Controls

Common Formats: MP3, WAV, OGG

HTML Video

Adding Video with video Tag

The video tag is used for lessons, demos, testimonials, product previews and training content.

Video Player Preview

This visual represents a video player area. Real video files will show play controls when uploaded.

2 Basic Video Syntax

The <video> tag embeds video content. The poster attribute shows an image before the video starts.

<video controls width="500" poster="cover.jpg">
<source src="training.mp4" type="video/mp4">
Your browser does not support video.
</video>

Attribute	Use	Example
controls	Shows play, pause and volume controls	<video controls>
autoplay	Starts video automatically	<video autoplay>
muted	Mutes the video sound	<video muted>
loop	Plays video repeatedly	<video loop>
poster	Shows image before video starts	<video poster="cover.jpg">

Note: Autoplay may not work in many browsers unless the video is muted. Use autoplay carefully.

Iframe Embeds

Embedding External Content

The iframe tag is used to display another webpage or external content inside your webpage.

YouTube Video

Use iframe to embed a YouTube video lesson or demo.

Google Map

Use iframe to show institute location on a contact page.

External Page

Use iframe carefully to show permitted external content.

Professional Tip: Always add a meaningful title attribute to iframe for accessibility.

Responsive Embed

Making iframe Responsive

Videos and maps should adjust properly on mobile screens.

3 Responsive Wrapper

A responsive iframe wrapper keeps video and map embeds in proper ratio on different screen sizes. The common video ratio is 16:9.

Responsive Preview Area

Responsive 16:9 Embed Area

CSS Concept: We will later use CSS to make iframe videos fully responsive using width, height, position and aspect ratio.

Try It Yourself

Create a Media Learning Page

Edit the code and click Run Code to see the output.

HTML Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Page Practice</title>
    <style>
        body{
            font-family:Arial;
            padding:20px;
            background:#f5f9ff;
        }
        section{
            background:white;
            padding:18px;
            margin-bottom:18px;
            border-radius:15px;
            box-shadow:0 6px 18px rgba(0,0,0,.08);
        }
        video, audio, iframe{
            max-width:100%;
            border-radius:12px;
        }
        .video-box{
            position:relative;
            padding-top:56.25%;
            overflow:hidden;
            border-radius:15px;
            background:#06285f;
        }
        .video-box iframe{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            border:0;
        }
    </style>
</head>
<body>

<h1>HTML Media Page</h1>

<section>
        <h2>Audio Lesson</h2>
        <audio controls>
            <source src="lesson.mp3" type="audio/mpeg">
            Your browser does not support audio.
        </audio>
        <p>Use uploaded audio file path in src.</p>
    </section>

<section>
        <h2>Video Lesson</h2>
        <video controls width="500" poster="cover.jpg">
            <source src="training.mp4" type="video/mp4">
            Your browser does not support video.
        </video>
        <p>Use uploaded video file path in src.</p>
    </section>

<section>
        <h2>YouTube Embed Example</h2>
        <div class="video-box">
            <iframe 
                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
                title="Sample YouTube Video"
                allowfullscreen>
            </iframe>
        </div>
    </section>

</body>
</html>

Output Preview Browser result

Practice Task: Add one Google Map iframe section and add a meaningful title attribute to every iframe.

Common Mistakes

Mistakes Students Should Avoid

Media files and embeds need correct paths, attributes and responsible usage.

Wrong Habits

Forgetting controls attribute in audio/video
Using wrong media file path
Uploading very large video files without compression
Using autoplay unnecessarily
Adding iframe without title attribute

Correct Habits

Use controls for user-friendly playback
Use correct file format and path
Use poster image for videos
Use title attribute in iframe
Make embeds responsive for mobile users

Remember: Do not embed content without permission. Use trusted sources and keep page speed in mind.

Quick Revision

Remember These Points

Revise these before moving to Chapter 11.

audio

The audio tag is used to add sound files to webpages.

video

The video tag is used to add video files to webpages.

source

The source tag provides media file path and type.

controls

The controls attribute shows play, pause and volume controls.

poster

The poster attribute shows an image before video starts.

iframe

The iframe tag embeds external content like YouTube and maps.

Protected Learning Content

Audio, Video & Embeds

audio

video

source

iframe

After This Chapter, You Will Understand

Audio

Video

Iframe

Responsive Media

Adding Audio with audio Tag

1 Basic Audio Syntax

Audio Player Preview

Adding Video with video Tag

Video Player Preview

2 Basic Video Syntax

Embedding External Content

YouTube Video

Google Map

External Page

Making iframe Responsive

3 Responsive Wrapper

Responsive Preview Area

Create a Media Learning Page

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which tag is used to add audio?

2. Which attribute shows play and pause buttons?

3. Which tag is used to add video?

4. Which tag is used to embed YouTube videos or Google Maps?

5. Which video attribute shows an image before video starts?

Remember These Points

audio

video

source

controls

poster

iframe