DEV Community

ABISHEK M
ABISHEK M

Posted on

HTML Video, Audio, and Iframe Tags

When creating a webpage, sometimes we need to add videos, audio, or content from another website. HTML provides some useful tags for this purpose. The <video>, <audio>, and <iframe> tags are commonly used to add multimedia and external content to a webpage.

Video Tag in HTML

The <video> tag is used to add a video to a webpage. Instead of using a separate video player, we can use this HTML tag to display the video directly on the website.

For example:

<video width="500" controls>
    <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

The controls attribute gives the user buttons like play, pause, volume, and fullscreen. We can also use attributes like autoplay, loop, muted, width, and height.

Audio Tag in HTML

The <audio> tag is used when we want to add music, songs, or other audio files to a webpage. It works similarly to the video tag.

For example:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

The controls attribute allows the user to play and pause the audio and change the volume. We can also use autoplay, loop, and muted with the audio tag.

Iframe Tag in HTML

The <iframe> tag is used to display content from another webpage inside our webpage. It is commonly used to embed YouTube videos, Google Maps, PDFs, and other external content.

For example:

<iframe
    src="https://example.com"
    width="600"
    height="400">
</iframe>
Enter fullscreen mode Exit fullscreen mode

The src attribute specifies what content should be displayed. The width and height attributes control the size of the iframe.

Conclusion

The <video>, <audio>, and <iframe> tags are useful when creating webpages with multimedia content. The <video> tag is used for videos, the <audio> tag is used for audio files, and the <iframe> tag is used to embed external content. These tags make webpages more useful and interactive.

Top comments (0)