🎬 HTML Media for Beginners

HTML Media helps us to add videos, audio, and more fun elements on web pages! Let's learn how to use it 💡

---

🎥 HTML Video

You can use the <video> tag to show videos.

✅ Example:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

🧾 Explanation:

• <video> - This is the main tag to add a video to your webpage.
• width="320" and height="240" - These set the size of the video player (in pixels).
• controls - This shows buttons like play, pause, volume, etc.
• <source src="movie.mp4" type="video/mp4"> - This tells the browser where the video file is and what type it is.
• Your browser does not support the video tag. - Fallback message for very old browsers.

---

🎧 HTML Audio

You can use the <audio> tag to play sound/music.

✅ Example:

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

🧾 Explanation:

• <audio> - This tag is used to add sound or music to a webpage.
• controls - Adds play, pause, and volume options for the user.
• <source src="song.mp3" type="audio/mpeg"> - Points to the audio file and tells the browser it's MP3.
• The text inside is shown only if the browser doesn't support HTML audio.

💡 Tip: You can add more than one <source> tag for better browser support.

---

📎 HTML Plug-ins

Used to add PDFs, games, or other files.

✅ Example (PDF Viewer):

<object data="file.pdf" type="application/pdf" width="600" height="400">
  PDF is not supported
</object>

🧾 Explanation:

• <object> - Used to show files like PDF or Flash inside a webpage.
• data="file.pdf" - This is the file path of the PDF.
• type="application/pdf" - Tells the browser it’s a PDF file.
• width and height - Set the viewer size.
• Inner text shows if browser can’t display the file.

---

✅ Another Way using <embed>:

<embed src="file.pdf" width="600" height="400">

• <embed> - Simpler way to show files like PDFs.
• No need to write the file type.
• Works well for small previews.

---

📺 Add YouTube Videos

You can add a YouTube video using an <iframe>.

✅ Example:

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

🧾 Explanation:

• <iframe> - A tag to embed another webpage inside your webpage.
• src="https://www.youtube.com/embed/yourvideoid" - Replace yourvideoid with your actual video ID.
  • Example: If the link is https://www.youtube.com/watch?v=dQw4w9WgXcQ, the video ID is dQw4w9WgXcQ.
• width and height - Size of the video frame.
• title - Helps screen readers.
• allowfullscreen - Lets the video go full-screen.

---

🎯 Summary Table

Tag	What It Does
<video>	Shows a video player
<audio>	Plays music or sound
<object>	Embeds PDF or other types of files
<iframe>	Shows YouTube videos or other web pages

---

✨ Tip: Try these tags in your own HTML project and see the magic!

Happy Coding 👩‍💻👨‍💻