HTML · Audio, Video & Embedded Content · Lesson 15 of 32

Audio, Video & Embedded Content

Audio, Video & Embedded Content

HTML5 provides native elements for adding audio and video directly to a webpage without requiring browser plugins.

HTML can also embed external documents and services using elements such as <iframe>.

Core Idea:

Use <audio> for sound, <video> for video, and <iframe> when an external webpage or embeddable resource needs to appear inside the current page.

1. The <audio> Element

The <audio> element is used to embed sound content in an HTML document.

Basic Example

<audio controls>

    <source src="lesson.mp3" type="audio/mpeg">

    Your browser does not support audio playback.

</audio>

The controls attribute tells the browser to display playback controls such as play, pause and volume.

2. Important Audio Attributes

Attribute Purpose
controls Displays browser-provided audio controls.
autoplay Requests automatic playback.
loop Repeats the audio after it ends.
muted Starts the media muted.
preload Provides a hint about how the browser should preload the audio.
Important:

Browsers may restrict automatic playback, particularly when media contains audible sound. Do not design a user experience that depends on autoplay working everywhere.

3. Multiple Audio Sources

The <source> element allows multiple media formats to be supplied so that the browser can choose a supported format. 

<audio controls>

    <source src="lesson.mp3" type="audio/mpeg">

    <source src="lesson.ogg" type="audio/ogg">

    Your browser does not support audio playback.

</audio>

The browser checks the available sources and uses one that it can play.

4. The <video> Element

The <video> element is used to embed video content directly into a webpage.

Basic Example

<video controls width="640">

    <source src="html-course.mp4" type="video/mp4">

    Your browser does not support video playback.

</video>

The controls attribute provides the browser's built-in video controls.

5. Important Video Attributes

Attribute Purpose
controls Displays video playback controls.
width Specifies the rendered width.
height Specifies the rendered height.
autoplay Requests automatic playback.
loop Repeats the video after playback ends.
muted Starts the video without audio.
poster Specifies an image displayed before video playback begins.
preload Provides a hint about preloading the video.

6. The poster Attribute

The poster attribute specifies an image displayed before a video starts playing. 

<video controls
       poster="html-course-cover.jpg">

    <source src="html-course.mp4"
            type="video/mp4">

</video>

A poster image can provide context and a visual preview of the video.

7. Multiple Video Sources

<video controls>

    <source src="course.mp4" type="video/mp4">

    <source src="course.webm" type="video/webm">

    Your browser does not support video playback.

</video>

Supplying multiple sources can improve compatibility across different browser and media-support combinations.

8. <audio> vs <video>

Feature <audio> <video>
Primary purpose Sound Video and associated audio
Visual frames No Yes
Common formats MP3, Ogg MP4, WebM
Typical use Music, podcasts, narration Lessons, demonstrations, presentations

9. The <track> Element

The <track> element provides timed text tracks for media such as subtitles, captions, descriptions or chapters.

Example

<video controls>

    <source src="lesson.mp4" type="video/mp4">

    <track
        src="lesson-en.vtt"
        kind="subtitles"
        srclang="en"
        label="English">

</video>
Accessibility:

Captions and subtitles can make video content accessible to users who are deaf or hard of hearing and useful in environments where audio cannot be played.

10. Important <track> Attributes

Attribute Purpose
src Specifies the WebVTT file.
kind Specifies the type of text track.
srclang Specifies the language of the track.
label Provides a human-readable track name.
default Indicates that the track should be selected by default.

11. WebVTT

WebVTT stands for Web Video Text Tracks.

It is commonly used to provide timed text such as subtitles and captions for HTML5 video. 

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the HTML course.

00:00:05.000 --> 00:00:08.000
Today we are learning multimedia.

12. The <iframe> Element

The <iframe> element embeds another HTML document or an embeddable external resource within the current webpage.

Basic Example

<iframe
    src="https://example.com"
    title="Example website">
</iframe>

The embedded document appears within a rectangular browsing context inside the current page.

13. Important <iframe> Attributes

Attribute Purpose
src Specifies the resource to embed.
title Provides an accessible name for the embedded content.
width Specifies the iframe width.
height Specifies the iframe height.
loading Provides a loading hint such as lazy loading.
allow Controls which features may be available to the embedded content.
sandbox Applies restrictions to the embedded document.

14. Embedding a Map

Many mapping services provide an embed option that generates an iframe snippet. 

<iframe
    src="https://maps.example.com/embed/..."
    title="Location map"
    loading="lazy">
</iframe>
Best Practice:

Use the official embed mechanism provided by the mapping service rather than copying arbitrary third-party iframe code.

15. Embedding External Video Services

Video platforms may provide an iframe-based embed option. The exact URL and parameters depend on the platform. 

<iframe
    src="https://video.example.com/embed/VIDEO_ID"
    title="HTML lesson video"
    loading="lazy"
    allowfullscreen>
</iframe>

The title attribute is important for accessibility because it identifies the purpose of the embedded browsing context.

16. iframe, embed and object

HTML provides several mechanisms for incorporating external resources. Their purposes are not identical.

Element Typical Purpose
<iframe> Embeds another HTML document or embeddable external content.
<object> Represents an external resource.
<embed> Embeds external content as specified by the resource.
Practical Tip:

For modern third-party webpage or service embeds, <iframe> is commonly the relevant mechanism when the service supports it.

17. Responsive Video

Fixed dimensions can cause media to overflow on smaller screens. Responsive design allows media to adapt to the available space. 

<video controls>

    <source src="lesson.mp4" type="video/mp4">

</video>

The site's existing CSS can make the video responsive. A common CSS strategy is to constrain the media to its container rather than forcing a fixed width.

Important:

Keep presentation rules in CSS rather than adding inline styles to HTML.

18. Responsive iframe

An iframe can also be placed inside a responsive wrapper so that embedded content adapts to different screen sizes. 

<div class="embed-container">

    <iframe
        src="https://example.com"
        title="Embedded resource"
        loading="lazy">
    </iframe>

</div>

CSS can then control the dimensions and aspect ratio of the wrapper and iframe.

19. Making Audio Accessible

Audio-only content should not rely exclusively on sound when the information is important to understanding the content.

Consider providing:

  • A text transcript.
  • A meaningful surrounding heading.
  • Controls for user-initiated playback.
  • Alternative text content where appropriate.

Example

<h2>Lesson Audio</h2>

<audio controls>

    <source src="lesson.mp3" type="audio/mpeg">

</audio>

<p>
    Transcript: HTML provides the structure of webpages...
</p>

20. Making Video Accessible

Accessible video should consider users who cannot hear or see the visual content.

Useful techniques include:

  • Provide captions or subtitles.
  • Use meaningful video titles and surrounding context.
  • Provide transcripts where appropriate.
  • Use audio descriptions when necessary.
  • Ensure media controls are usable.
<video controls>

    <source src="lesson.mp4" type="video/mp4">

    <track
        src="lesson-en.vtt"
        kind="captions"
        srclang="en"
        label="English"
        default>

</video>

21. iframe Accessibility

An iframe should normally have a meaningful title describing its embedded content. 

<iframe
    src="https://example.com/course"
    title="HTML course demonstration"
    loading="lazy">
</iframe>
Exam Tip:

The title attribute is especially important when using an iframe because assistive technologies need a meaningful name for the embedded browsing context.

22. iframe Security with sandbox

The sandbox attribute applies restrictions to content loaded inside an iframe. 

<iframe
    src="https://example.com/tool"
    title="Embedded tool"
    sandbox>
</iframe>

Additional permissions can be selectively enabled using sandbox tokens when required.

Security Principle:

Do not grant an embedded resource more permissions than it actually needs.

23. The allow Attribute

The allow attribute can control access to particular browser features for embedded content. 

<iframe
    src="https://example.com/video"
    title="Training video"
    allow="fullscreen">
</iframe>

The exact permissions required depend on the service being embedded.

24. Lazy Loading Embedded Content

The loading="lazy" attribute provides a hint that an iframe should be loaded when it approaches the user's viewport rather than immediately. 

<iframe
    src="https://example.com/resource"
    title="Embedded resource"
    loading="lazy">
</iframe>

This can reduce unnecessary initial loading work when embedded content appears far down a page.

25. Fallback Content

Providing fallback text inside media elements is useful for browsers or situations where the media cannot be played. 

<video controls>

    <source src="lesson.mp4" type="video/mp4">

    <p>
        Your browser does not support HTML5 video.
    </p>

</video>

The fallback content is placed between the opening and closing media tags.

26. Common Media Formats

Media Format MIME Type Example
Audio MP3 audio/mpeg
Audio Ogg audio/ogg
Video MP4 video/mp4
Video WebM video/webm
Remember:

Browser support and codec support are different concepts. Always test the actual media you intend to deliver.

27. Practical Example: Educational Audio Player

<section>

    <h2>HTML Audio Lesson</h2>

    <audio controls>

        <source
            src="html-introduction.mp3"
            type="audio/mpeg">

        Your browser does not support audio playback.

    </audio>

    <p>
        This lesson introduces the fundamentals of HTML.
    </p>

</section>

28. Practical Example: Educational Video

<article>

    <h2>HTML Forms Tutorial</h2>

    <video controls poster="forms-course.jpg">

        <source
            src="html-forms.mp4"
            type="video/mp4">

        <track
            src="forms-en.vtt"
            kind="captions"
            srclang="en"
            label="English"
            default>

        Your browser does not support video playback.

    </video>

</article>

29. Practical Example: Embedded Resource

<section>

    <h2>Interactive HTML Demonstration</h2>

    <iframe
        src="https://example.com/demo"
        title="Interactive HTML demonstration"
        loading="lazy"
        sandbox>
    </iframe>

</section>

30. Complete Multimedia Webpage

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>HTML Multimedia Lesson</title>

</head>

<body>

    <header>

        <h1>HTML Multimedia Lesson</h1>

        <p>
            Learn audio, video and embedded content.
        </p>

    </header>


    <main>

        <section>

            <h2>Audio Lesson</h2>

            <audio controls>

                <source
                    src="lesson.mp3"
                    type="audio/mpeg">

                Your browser does not support audio playback.

            </audio>

        </section>


        <section>

            <h2>Video Lesson</h2>

            <video controls poster="lesson-cover.jpg">

                <source
                    src="lesson.mp4"
                    type="video/mp4">

                <track
                    src="lesson-en.vtt"
                    kind="captions"
                    srclang="en"
                    label="English"
                    default>

                Your browser does not support video playback.

            </video>

        </section>


        <section>

            <h2>Additional Resource</h2>

            <iframe
                src="https://example.com/resource"
                title="Additional learning resource"
                loading="lazy">
            </iframe>

        </section>

    </main>


    <footer>

        <p>&copy; 2026 HTML Learning Centre</p>

    </footer>

</body>

</html>

31. Common Mistakes

  1. Forgetting the controls attribute when users need playback controls.
  2. Using only one media format without considering browser compatibility.
  3. Depending on autoplay for an important user experience.
  4. Providing video without captions when captions are needed.
  5. Using an iframe without a meaningful title.
  6. Embedding untrusted external content without considering security restrictions.
  7. Using fixed media dimensions that cause horizontal overflow on small screens.
  8. Loading large media resources unnecessarily on pages where they are not immediately visible.
  9. Placing presentation rules in inline CSS instead of the site's stylesheet.

32. Interview Questions

1. What is the purpose of the audio element?

View Answer

The <audio> element embeds sound content directly into an HTML document.

2. What is the purpose of the video element?

View Answer

The <video> element embeds video content into an HTML document.

3. Why is the source element used?

View Answer

The <source> element allows one or more media sources to be specified for audio or video.

4. What is the purpose of the track element?

View Answer

It provides timed text tracks such as subtitles, captions, descriptions or chapters for media.

5. What is an iframe?

View Answer

An <iframe> embeds another HTML document or an embeddable external resource within the current webpage.

6. Why should an iframe have a title?

View Answer

The title gives the embedded browsing context a meaningful accessible name, helping users of assistive technologies understand its purpose.

7. What is the purpose of the poster attribute?

View Answer

It specifies an image displayed before a video starts playing.

33. Exam Questions

Q1. Write HTML code to add an audio file with playback controls.

Answer 
<audio controls>

    <source src="lesson.mp3" type="audio/mpeg">

</audio>

Q2. Write HTML code to embed a video file.

Answer 
<video controls>

    <source src="lesson.mp4" type="video/mp4">

</video>

Q3. Differentiate between audio and video elements.

Answer

<audio> is used for sound content, while <video> is used for video content and can include audio.

Q4. What is the use of the track element?

Answer

It adds timed text tracks such as subtitles and captions to audio/video content.

Q5. What is the purpose of the controls attribute?

Answer

It instructs the browser to display built-in controls for media playback.

Q6. What is the purpose of the iframe element?

Answer

It embeds another HTML document or supported external content inside the current webpage.

Q7. Which attribute provides an image preview for a video?

Answer

poster

34. Practical Challenge

Create a multimedia learning page for an online course.

The page should contain:

  • An educational audio lesson using <audio>.
  • An educational video using <video>.
  • A poster image for the video.
  • English captions using <track>.
  • An embedded external learning resource using <iframe>.
  • Meaningful iframe titles.
  • Responsive media using the existing CSS.
Advanced Challenge:

Add multiple audio/video sources, provide a transcript for the audio lesson, use lazy loading for the iframe, and apply appropriate iframe security restrictions.

35. Quick Revision

Element / Attribute Remember
<audio> Embeds audio
<video> Embeds video
<source> Provides media source
<track> Provides timed text
controls Shows media controls
poster Video preview image
autoplay Requests automatic playback
loop Repeats media
muted Starts media muted
<iframe> Embeds another document/resource
title Accessible name for iframe
loading="lazy" Requests deferred iframe loading
sandbox Restricts iframe capabilities
WebVTT Timed text format used by track
Golden Rule:

Use native HTML5 media elements whenever appropriate, provide accessible alternatives such as captions and transcripts, make embedded content responsive, and treat third-party iframes as security-sensitive content.

36. Multimedia Checklist

  • Use <audio> for audio content.
  • Use <video> for video content.
  • Use <source> when multiple media sources are appropriate.
  • Use <track> for captions, subtitles and other timed text.
  • Provide meaningful fallback content.
  • Do not depend on autoplay for essential content.
  • Provide captions and transcripts where appropriate.
  • Give iframes meaningful title attributes.
  • Use loading="lazy" where deferred iframe loading is appropriate.
  • Restrict iframe capabilities when appropriate using sandbox and allow.
  • Use the existing CSS for responsive media instead of inline styling.
Start This Course From the Beginning →