Video, Audio & Embeds

Modern HTML plays video and audio without old browser plugins. Use <video> and <audio> with src or <source> for multiple formats.

HTML Media overview

Modern HTML plays video and audio without old browser plugins. Use <video> and <audio> with src or <source> for multiple formats.

Always give controls so users can play, pause, and adjust volume.

Real-life example: Media tags are like a music player and TV built into your web page — no separate app needed.

<video> — movies, tutorials, clips
<audio> — podcasts, music, sound effects
<source> — backup file format if one fails

HTML Video

Use <video controls width="..."> with <source src="file.mp4" type="video/mp4" />. Add text inside for old browsers.

Common formats: mp4 (best support), webm. Keep files small for slow networks.

Real-life example: video tag is like inserting a DVD into a classroom projector — press play on the page itself.

Video element

<video controls width="480">
  <source src="lesson-intro.mp4" type="video/mp4" />
  <source src="lesson-intro.webm" type="video/webm" />
  Your browser does not support video.
</video>

HTML Audio

<audio controls> works like video but for sound only. Good for language lessons or background music with a mute option.

Real-life example: audio tag is like a voice note on WhatsApp — play button, pause, simple and inline.

Audio element

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

Plug-ins note

Old pages used Flash and other plugins. They are dead on modern browsers for security and mobile support.

Use native <video>, <audio>, or iframe embeds (YouTube) instead. Never ask beginners to install plugins.

Real-life example: Plugins were like extra batteries sold separately — today the phone (browser) has everything built in.

YouTube embed

Embed YouTube with <iframe src="https://www.youtube.com/embed/VIDEO_ID">. Copy embed code from YouTube Share menu.

Set width, height, and title. Lazy loading with loading="lazy" saves data.

Real-life example: YouTube iframe is like putting a small TV in your shop that only plays one channel you chose.

Tip: Compress large video files before hosting yourself — or use YouTube and embed.

YouTube iframe

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