DEV Community

Abimanyu P
Abimanyu P

Posted on

HTML video,audio and iframe tags

<video> Tag :

Websites become more interesting when they contain videos. HTML provides the <video> tag to add videos directly to a web page without using any extra software. We can play tutorial videos, product demos, movies, or any other video by using this tag. The controls attribute displays play, pause, volume, and fullscreen buttons so users can easily control the video. We can also use attributes like autoplay, loop, and muted depending on our needs. The <video> tag is supported by all modern browsers, making it the best choice for displaying videos.

<video width="500" controls>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode

<audio> Tag :

Sometimes a website only needs sound instead of a video. In that case, HTML provides the <audio> tag. It can be used to play songs, podcasts, voice recordings, or notification sounds. By adding the controls attribute, the browser displays play, pause, and volume controls automatically. We can also use attributes like loop, autoplay, and muted when required. Since the audio player is built into the browser, users can listen to the sound without installing any additional software.

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

<iframe> Tag :

The <iframe> tag is used to display another web page inside our current web page. It is commonly used to embed YouTube videos, Google Maps, online documents, and other websites. Instead of downloading the content, the browser loads it directly from its original source. This makes it easy to include useful content from other websites without creating it ourselves. The width and height attributes control the size of the iframe, and allowfullscreen lets users watch videos in fullscreen mode.

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    allowfullscreen>
</iframe>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)