📄 Embedding Videos and Audio – Making Pages Multimedia

📅 October 2, 2025

✍️ By Evans

Hey friends! 👋

When I first built my simple HTML pages, everything was just text and images. But soon, I wanted to take it a step further — I wanted videos and sound on my site!

That’s when I discovered the magic of the <video> and <audio> tags. 🎥🎵

🎬 Adding a Video with the <video> Tag

The <video> tag lets you display videos directly on your webpage — no YouTube or third-party player needed.

Here’s the first example I tried:

<video width="500" controls>
  <source src="my-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
                        

The controls attribute adds play, pause, and volume buttons automatically.

If the browser can’t play the video, it shows the text inside the tag(Your browser does not support the video tag).

Other useful attributes:

• autoplay – starts playing the video automatically
• loop – makes the video start again when it ends
• muted – starts the video without sound
• poster="image.jpg" – shows an image before the video starts

🎵 Adding Audio with the <audio> Tag

The <audio> tag works almost the same way, just for sound!

<audio controls>
  <source src="background-music.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
                        

The controls attribute adds play and pause buttons for the user.

Bonus attributes:

• autoplay – play automatically
• loop – repeat the audio
• muted – start without sound

💡 A Tip I Learned

Always include the <source> tag inside <video> or <audio> and specify the file type (like video/mp4 or audio/mpeg).

This helps browsers decide which format to play if you include multiple sources.

For example:

<video controls>
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
</video>
                        

🌐 Embedding from YouTube or Other Platforms

Sometimes it’s easier to just embed a YouTube video.

You can do that with an <iframe>:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
                        

That’s how most blogs or tutorials show YouTube videos right on their page.

🎯 What I Learned

Learning how to embed multimedia made my web pages come alive! 🌟

It’s one thing to read text, but when you see and hear content, it changes the whole experience.

Now I can add background music, tutorials, or even short clips to make my pages more interactive.

👉 What’s Next?

Up next, I’ll explore Using <div> and <span> – Grouping and Styling Elements — where I’ll learn how to group content neatly and style parts of my page like a pro. 💅

Thanks for reading, and as always — keep coding, keep creating! 🚀

— Evans 💻