🎬 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 tag to show videos.

✅ Example:

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

🧾 Explanation:

• - 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.
• - 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 tag to play sound/music.

✅ Example:

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

🧾 Explanation:

• - This tag is used to add sound or music to a webpage.
• controls - Adds play, pause, and volume options for the user.
• - 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 tag for better browser support.

📎 HTML Plug-ins

Used to add PDFs, games, or other files.

✅ Example (PDF Viewer):

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

🧾 Explanation:

• - 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 :

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

• - 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

✅ Example:

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

🧾 Explanation:

• - 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

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

Happy Coding 👩‍💻👨‍💻