In this article, we will learn to set the width and height of the video player in HTML5.
The following are the two scenarios
- The width and height of the video are fixed.
- Make the video respond to your screen width.
Approach: The HTML5 width and height attributes of the video tag are used to set the height and width of the video player respectively. The source tag is used to specify multimedia resources such as video and audio. The src attribute of the source tag specifies the path of the resource.
Syntax:
<video width=" " height=" "></video>
Example 1: The following example demonstrates the setting of width and height of the video as desired.
HTML
<!DOCTYPE html> <html>
<head>
<title>gfg</title>
</head>
<body>
<!-- set width and height of the video -->
<video width="800px" height="400px" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the setting of width and height of the video to make your video respond to your screen width.
HTML
<!DOCTYPE html> <html>
<head>
<title>gfg</title>
<style>
video
{
position: relative;
}
</style>
</head>
<body>
<!-- set width and height of the video -->
<video width="100%" height="auto" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
</body>
</html>
|
Output: