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
