← All lessons

Lesson 8 · HTML

Media & Embedding

~20 min

1. Audio & Video

<video controls width="400" poster="thumb.jpg">
  <source src="demo.mp4" type="video/mp4">
  Your browser does not support video.
</video>

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

Always add controls so users can play/pause. Provide fallback text.

2. Embedding

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

Use title for iframes (accessibility), loading="lazy" for performance.

Interactive Practice

Practice: Media & Embedding

Try the examples in your editor and check off when done.

0% complete
Check when done
Quiz

Test Your Understanding

1. What does controls do?

2. Why add title to iframe?