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>
<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>
<video width="100%" height="auto" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
31 Mar, 2021
Like Article
Save Article