Welcome back! So far, you’ve learned how to create text content, add images, build tables, and collect user input with forms. Now, let’s make your website more dynamic by embedding videos and other media.
Adding videos can help explain your content better, engage visitors, and make your pages more lively.
🎥 Adding Videos Using the <video> Tag
HTML5 introduced the <video> tag, which allows you to embed videos directly on your webpage without relying on plugins.
Basic Syntax
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Important Attributes
| Attribute | Meaning |
|---|---|
controls | Adds play, pause, and volume controls. |
autoplay | Starts playing automatically (can be annoying — use carefully). |
loop | Repeats the video after it ends. |
muted | Starts the video muted. |
poster | Image shown before the video plays. |
Example
<video width="500" controls poster="thumbnail.jpg">
<source src="demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
🎵 Embedding Audio
You can also embed audio using the <audio> tag.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
🔗 Embedding YouTube Videos
You can embed YouTube videos using an <iframe>.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/yourVideoID" frameborder="0" allowfullscreen></iframe>
- Replace
yourVideoIDwith the actual video ID from the YouTube URL. - You can adjust
widthandheightto fit your design.
🌟 Adding Other Embeds (Maps, PDFs, etc.)
Embedding Google Maps
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Embedding PDFs
<embed src="document.pdf" width="600" height="500" type="application/pdf">
✨ Example: Page with Video and Audio
<!DOCTYPE html>
<html>
<head>
<title>My Media Page</title>
</head>
<body>
<h1>Welcome to My Media Page</h1>
<h2>Watch My Video</h2>
<video width="500" controls poster="preview.jpg">
<source src="myvideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>Listen to My Audio</h2>
<audio controls>
<source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h2>Check Out This YouTube Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</body>
</html>
💡 Tips for Embedding Media
✅ Always provide fallback text so users know what they’re missing if media doesn’t load.
✅ Use the controls attribute to give users playback control.
✅ Don’t set videos to autoplay unless it’s essential (users may find it annoying).
✅ Check that your media files are optimized so they don’t slow down your page.
✅ Summary
- Use
<video>and<audio>tags to embed media directly. - Use
<iframe>to embed YouTube videos, maps, and other external content. - Provide control options and fallback text for better user experience.
- Media makes your site more engaging and interactive.
🚀 What’s Next?
In the next blog, we’ll learn how to structure your webpage using semantic HTML. You’ll learn about tags like <header>, <footer>, <section>, and more — these help improve accessibility, SEO, and overall code clarity.
Stay tuned and keep creating! 💻✨