Media Tags

Last Updated: 01 Nov 2025

HTML Media tags are used to embed multimedia content like:

  • 🎵 Audio (music, sound effects)
  • 🎥 Video (movies, clips)
  • 🌐 Other pages (using iframe)

These tags make web pages more interactive and user-friendly.

🗣 Hinglish Tip: Media tags se hum web pages ko boring text se zyada interesting bana sakte hain — jaise YouTube player, songs, ya Google Maps embed karna!

🎥 HTML Video Tag

Used to play video files like .mp4, .webm, etc.

🧱 Syntax:

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

Attributes used:

  • controls → Adds controls to the video player
  • src → Specifies the path or URL of the video file
  • type → Specifies the type of the video file
  • autoplay → Autoplay the video when the page loads
  • loop → Loop the video when it ends
  • muted → Mute the video
  • poster → Sets a poster image for the video
  • width → Sets the width of the video player
  • height → Sets the height of the video player

Example

<video width="500" height="280" controls poster="thumbnail.jpg">
  <source src="videos/nature.mp4" type="video/mp4" />
  <source src="videos/nature.webm" type="video/webm" />
  Your browser does not support video tag.
</video>

🗣 Hinglish Tip: controls lagana mat bhoolna — bina controls ke user play/pause nahi kar sakta.Poster attribute se video start hone se pehle image dikhai deti hai — jaise YouTube thumbnail!

🎧 HTML Audio Tag

Used to play sound or music files.

🧱 Syntax:

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

Attributes used:

  • controls → Adds controls to the audio player
  • src → Specifies the path or URL of the audio file
  • type → Specifies the type of the audio file
  • autoplay → Autoplay the audio when the page loads but it is muted by default
  • loop → Loop the audio when it ends
  • muted → Mute the audio

Example

<audio controls autoplay loop muted>
  <source src="audio/song.mp3" type="audio/mpeg" />
  Your browser does not support audio.
</audio>

🌐 HTML Iframe Tag

Used to embed another webpage, YouTube video, Google Map, etc., inside your page.

🧱 Syntax:

<iframe src="https://example.com" width="500" height="300"></iframe>

Attributes used:

  • src → Specifies the URL of the webpage to embed
  • width → Sets the width of the iframe
  • height → Sets the height of the iframe
  • frameborder → Adds a border around the iframe
  • allowfullscreen → Enables fullscreen mode in the iframe
  • allow → Enables specific features in the iframe
  • title → Adds a title to the iframe
  • referrerpolicy → Sets the referrer policy for the iframe
  • loading → Sets the loading strategy for the iframe

Example 1: Embed YouTube Video

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/tgbNymZ7vqY"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

🗣 Hinglish Tip: allowfullscreen lagao agar video ko full screen banana hai.Ye bilkul YouTube ka embedded player jaisa kaam karta hai.

Example 2: Embed Google Map

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!..."
  width="400"
  height="300"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
>
</iframe>

🧠 Quick Practice

← PreviousNext →