What Is the <video> Tag?

The <video> tag in HTML is used to embed video content into a web page. It allows you to play video files directly in the browser without requiring external plugins. The <video> tag supports various video formats and includes attributes to control playback behavior, such as displaying playback controls, autoplaying the video, or looping it continuously.

Syntax of the <video> Tag

The basic syntax for the <video> tag is as follows:

<video src="videofile.mp4" controls></video>

• <video>: The video tag used to embed videos.
• src="videofile.mp4": The src attribute specifies the path to the video file you want to display.
• controls: This attribute adds playback controls (like play, pause, and volume) to the video player.
• </video>: The closing tag for the video element.

Examples of the <video> Tag

Let's explore two practical examples of using the <video> tag to embed videos into your web pages. Each example includes a complete HTML code snippet and an explanation.

1. Basic Video Embed with Controls

In this example, we'll embed a video file and display playback controls, allowing users to play, pause, and adjust the volume of the video.

Example: Embedding a Promotional Video with Controls

Explanation:

• The <video> tag embeds the promotional video located at https://videos.pexels.com/video-files/5377684/5377684-uhd_2560_1440_25fps.mp4.
• The controls attribute adds playback controls below the video player, enabling users to interact with the video (play, pause, volume).

2. Responsive Video Embed

Creating responsive videos ensures that they adjust gracefully to different screen sizes, enhancing the user experience on various devices. By using percentage values for the width attribute, the video scales relative to its parent container.

Example: Embedding a Responsive Tutorial Video

Explanation:

• The controls attribute adds playback controls for user interaction.
• The width="50%" attribute ensures that the video adjusts its width to 50% of its parent container, making it responsive to different screen sizes.

Understanding how to use the <video> tag effectively allows you to incorporate engaging video content into your websites, making them more interactive and appealing to visitors.