HTML DOM Video width Property
Last Updated :
27 Mar, 2024
The HTML video element displays a video with specified dimensions. Using JavaScript, its width property can be dynamically altered, enabling dynamic adjustments to the video display.
Syntax:Â
// To Get the width property:Â
videoObject.width
// To Set the width property:Â
videoObject.width = pixels
Property Values:Â
- pixels: It is used to specify the width of the video player, in pixels
Return Value: It returns a string value that represents the width of the video element.
Example: In this example the HTML video element displays a video with defined width and height. JavaScript function changes video width on double click. Essential for dynamic content manipulation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Video width Property
</title>
</head>
<body style="text-align: center">
<h2>
Video width Property
</h2>
<br>
<video id="Test_Video"
width="360"
height="240"
controls>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230623105019/Untitled.mp4"
type="video/mp4">
<source src="sample2.ogg"
type="video/ogg">
</video>
<p>
To change the width of the video,
double click the "Change Width" button.
</p>
<br>
<button ondblclick="My_Video()">
Change Width
</button>
<script>
function My_Video() {
document.getElementById(
"Test_Video").width = "600";
}
</script>
</body>
</html>
Output:Â
HTML DOM Video width Property Example Output
Supported Browsers:Â
Share your thoughts in the comments
Please Login to comment...