🎞 Day 8 — Embedding Multimedia and iFrames in HTML

on

🎥 Day 8 — Multimedia & Iframes in HTML

Welcome to Day 8! Today you’ll learn how to add sound, videos, and external content to your web pages. Multimedia makes websites more interactive and engaging, while iframes let you embed content like maps, videos, or even other pages directly inside your own.

🎧 1️⃣ Audio in HTML

HTML5 introduced the <audio> element, allowing browsers to play sound without extra plugins. 

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
  • controls adds play/pause buttons
  • autoplay starts automatically (not recommended)
  • loop repeats playback

🎬 2️⃣ Video in HTML

Videos can be added using the <video> tag. You can include multiple formats for better compatibility. 

<video width="400" controls poster="thumbnail.jpg">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

The poster attribute displays an image before playback starts.

🖼 3️⃣ Embedding External Videos

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

This method is widely used to embed videos from YouTube and other platforms.

🧭 4️⃣ Responsive Video Container

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    style="position:absolute;top:0;left:0;width:100%;height:100%;"
    frameborder="0" allowfullscreen></iframe>
</div>

🌐 5️⃣ Iframes — Embedding External Pages

<iframe src="https://www.wikipedia.org" width="100%" height="300"></iframe>

An <iframe> allows you to display another webpage inside your page.

📍 6️⃣ Embedding Google Maps

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18..."
  width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>

⚙️ 7️⃣ Lazy Loading

You can improve page performance by using loading="lazy" on iframes or images to delay loading until needed.

🧠 8️⃣ Practice Task

  1. Add background music to a web page using the <audio> tag.
  2. Embed a YouTube tutorial video about HTML basics.
  3. Add a Google Map showing your city.
  4. Make all videos responsive using inline styles.

🧮 Mini Quiz

  • Q1: What tag is used for embedding videos?
  • Q2: What does the poster attribute do?
  • Q3: Which attribute enables lazy loading?

🎯 Summary

You’ve learned how to add multimedia and embed external resources to enhance your web pages. With audio, video, and iframes, you can make your sites dynamic and interactive. Tomorrow, we’ll focus on image optimization and performance improvements.

Comments

Post a Comment