HTML Full Course [Day 13] [Hindi] 💻 | Embedding Media (YouTube, Video, Audio) 🚀 | Mohit Decodes

🎥 HTML Tutorial – Part 13: Embedding Media (YouTube, Video, Audio)

Welcome to Day 13 of the HTML Full Course [Hindi] by Mohit Decodes! In today’s lesson, you will learn how to embed various media types into your webpage — including YouTube videos, self-hosted videos, and audio files.

🔹 Embedding YouTube Videos

To embed a YouTube video, use the <iframe> tag.

Example:

html
CopyEdit
<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>
  1. Replace VIDEO_ID with the actual ID from the YouTube URL.

🔹 Embedding Video Files (<video>)

The <video> tag lets you embed videos stored locally or on your server.

Example:

html
CopyEdit
<video width="640" height="360" controls>
<source src="videos/sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
  1. Use multiple <source> tags for different formats (mp4, webm, ogg) to support all browsers.

🔹 Embedding Audio Files (<audio>)

The <audio> tag embeds sound files.

Example:

html
CopyEdit
<audio controls>
<source src="audio/sample-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

💡 Pro Tips:

  1. Always include controls attribute for user-friendly play/pause
  2. Provide fallback text for unsupported browsers
  3. Use captions or transcripts for accessibility
  4. Optimize media file sizes for faster loading