HTML Iframes & Multimedia

Embed External Content and Add Multimedia Using HTML

In this class, students will learn how to embed external content using iframes and add audio and video files to create rich multimedia webpages.

Class Objective

• Use iframes to embed external content
• Add audio and video to webpages
• Create rich multimedia webpages using HTML

Introduction to Iframes

An iframe is used to embed another webpage or external content inside the current webpage.

Iframe Tag

Basic Iframe Syntax

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Common Uses of Iframes

• Embedding websites
• Embedding Google Maps
• Embedding YouTube videos

Embedding YouTube Video (Iframe)

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video">
</iframe>

Introduction to Multimedia in HTML

Multimedia content includes audio and video. HTML provides special tags to play media files directly in the browser.

Audio Tag

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

Common Audio Attributes

• controls
• autoplay
• loop

Video Tag

<video width="400" controls>
    <source src="video.mp4" type="video/mp4">
</video>

Common Video Attributes

• controls
• autoplay
• loop
• muted

Practice Task

• Add one iframe (YouTube video or website)
• Add one audio player
• Add one video player

Assignment

• Create a multimedia webpage
• Add a page heading
• Embed a YouTube video using iframe
• Add an audio file with controls
• Add a video file with controls