Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video width Property
The HTML DOM Video width property allows you to get or set the width of a video element in pixels. This property corresponds to the width attribute of the <video> element and can be manipulated dynamically using JavaScript.
Syntax
Following is the syntax for getting the width value −
mediaObject.width
Following is the syntax for setting the width value −
mediaObject.width = number
Parameters
number − A positive integer representing the width of the video element in pixels.
Return Value
The property returns a number representing the current width of the video element in pixels. If no width is set, it returns 0.
Example − Getting and Setting Video Width
Following example demonstrates how to get and modify the width of a video element −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video width Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Video Width Property Demo</h2>
<video id="myVideo" width="300" height="200" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="getWidth()">Get Width</button>
<button onclick="increaseWidth()">Increase Width</button>
<button onclick="decreaseWidth()">Decrease Width</button>
<button onclick="resetWidth()">Reset Width</button>
<p id="result">Current width: 300px</p>
<script>
var video = document.getElementById("myVideo");
var result = document.getElementById("result");
function getWidth() {
result.textContent = "Current width: " + video.width + "px";
}
function increaseWidth() {
video.width += 50;
result.textContent = "Width increased to: " + video.width + "px";
}
function decreaseWidth() {
if (video.width > 100) {
video.width -= 50;
result.textContent = "Width decreased to: " + video.width + "px";
} else {
result.textContent = "Minimum width reached: " + video.width + "px";
}
}
function resetWidth() {
video.width = 300;
result.textContent = "Width reset to: " + video.width + "px";
}
</script>
</body>
</html>
The example shows a video with interactive buttons to get, increase, decrease, and reset its width. The current width value is displayed dynamically.
Example − Responsive Video Width
Following example demonstrates setting video width based on screen size −
<!DOCTYPE html>
<html>
<head>
<title>Responsive Video Width</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Responsive Video Example</h2>
<video id="responsiveVideo" height="200" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="setSmallWidth()">Small (200px)</button>
<button onclick="setMediumWidth()">Medium (400px)</button>
<button onclick="setLargeWidth()">Large (600px)</button>
<p id="widthInfo"></p>
<script>
var video = document.getElementById("responsiveVideo");
var info = document.getElementById("widthInfo");
// Set initial width
video.width = 400;
info.textContent = "Current width: " + video.width + "px";
function setSmallWidth() {
video.width = 200;
info.textContent = "Width set to: " + video.width + "px (Small)";
}
function setMediumWidth() {
video.width = 400;
info.textContent = "Width set to: " + video.width + "px (Medium)";
}
function setLargeWidth() {
video.width = 600;
info.textContent = "Width set to: " + video.width + "px (Large)";
}
</script>
</body>
</html>
This example allows switching between different predefined video widths, useful for creating responsive video players.
Key Points
The
widthproperty accepts only positive integer values representing pixels.Setting the width to
0makes the video invisible but it still occupies space in the layout.The property only affects the display width, not the actual video file dimensions.
Changes to the width property are immediately reflected in the browser.
If no width is explicitly set, the property returns
0even if the video displays at its natural width.
Browser Compatibility
The Video width property is supported in all modern browsers that support HTML5 video elements, including Chrome, Firefox, Safari, Edge, and Opera.
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
Conclusion
The HTML DOM Video width property provides a straightforward way to dynamically control the display width of video elements using JavaScript. It's particularly useful for creating responsive video players and interactive media applications that need to adjust video dimensions based on user preferences or screen size.
172 Views
