HTML Iframe, Audio and Video Tags

In modern web development, multimedia and embedded content are common. HTML provides tags like <iframe>, <audio>, and <video> to make it easy to display interactive and media-rich content on your website. These tags allow you to embed external pages, play sound, or stream video directly in the browser.

Let’s explore them one by one:

The iframe Tag

An iframe (inline frame) is used to embed another HTML document within the current one. It’s often used for embedding videos, maps, or other web pages.

Example:

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

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

Common Attributes: src, width, height, title

👉 Always include the title attribute for accessibility, describing the embedded content.

YouTube Embed Example:

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

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

The audio Tag

The <audio> element is used to embed sound content, like music or podcasts. It supports attributes like controls, autoplay, and loop.

Example:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element. <!-- fallback text -->
</audio>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element. <!-- fallback text -->
</audio>

Common Attributes: controls, autoplay, loop, muted

👉 Fallback text: If a browser cannot play the <audio> element (very old browsers), this text will be shown instead. You can even provide a direct download link:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<p>Your browser does not support the audio element.
<a href="audio.mp3">Download the audio</a>.</p>
</audio>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<p>Your browser does not support the audio element.
<a href="audio.mp3">Download the audio</a>.</p>
</audio>

The video Tag

The <video> element is used to embed video content. It supports attributes like controls, autoplay, loop, and muted.

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag. <!-- fallback text -->
</video>

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag. <!-- fallback text -->
</video>

Common Attributes: controls, autoplay, loop, muted, width, height

Summary

Practice Challenge

1. Embed a YouTube video using <iframe>.
2. Add an <audio> player with controls.
3. Create a <video> player with a sample MP4 file.