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 height Property
The HTML DOM Video height property gets or sets the height of a video element in pixels. This property corresponds to the height attribute of the <video> element and allows dynamic resizing of video content through JavaScript.
Syntax
Following is the syntax for getting the height property −
mediaObject.height
Following is the syntax for setting the height property −
mediaObject.height = number
Parameters
The height property accepts the following parameter −
number − A numeric value representing the height of the video element in pixels. The value must be a positive integer.
Return Value
The height property returns a number representing the current height of the video element in pixels.
Example − Getting and Setting Video Height
Following example demonstrates how to get and modify the height of a video element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video height Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.video-container { text-align: center; margin: 20px 0; }
button { padding: 8px 16px; margin: 5px; border-radius: 5px; }
#output { margin-top: 15px; font-weight: bold; }
</style>
</head>
<body>
<div class="video-container">
<h2>Video Height Property Demo</h2>
<video id="myVideo" width="320" height="180" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="increaseHeight()">Increase Height</button>
<button onclick="decreaseHeight()">Decrease Height</button>
<button onclick="resetHeight()">Reset Height</button>
<div id="output">Current height: 180px</div>
</div>
<script>
var video = document.getElementById("myVideo");
var output = document.getElementById("output");
function increaseHeight() {
video.height += 50;
output.textContent = "Current height: " + video.height + "px";
}
function decreaseHeight() {
if (video.height > 100) {
video.height -= 50;
output.textContent = "Current height: " + video.height + "px";
}
}
function resetHeight() {
video.height = 180;
output.textContent = "Current height: " + video.height + "px";
}
</script>
</body>
</html>
The example creates three buttons to increase, decrease, and reset the video height. The current height value is displayed below the buttons −
Video Height Property Demo [Video Player - 320x180] [Increase Height] [Decrease Height] [Reset Height] Current height: 180px
Example − Reading Current Video Dimensions
Following example shows how to read both width and height properties of a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Dimensions Reader</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.info { background-color: #f0f8ff; padding: 15px; margin: 10px 0; border-radius: 5px; }
</style>
</head>
<body>
<h2>Video Dimensions Information</h2>
<video id="videoElement" width="400" height="225" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="showDimensions()">Show Video Dimensions</button>
<div id="dimensions" class="info"></div>
<script>
function showDimensions() {
var video = document.getElementById("videoElement");
var dimensionsDiv = document.getElementById("dimensions");
dimensionsDiv.innerHTML =
"<strong>Video Element Dimensions:</strong><br>" +
"Width: " + video.width + "px<br>" +
"Height: " + video.height + "px<br>" +
"Aspect Ratio: " + (video.width / video.height).toFixed(2);
}
</script>
</body>
</html>
Clicking the button displays the current dimensions and calculated aspect ratio of the video element −
Video Dimensions Information [Video Player - 400x225] [Show Video Dimensions] Video Element Dimensions: Width: 400px Height: 225px Aspect Ratio: 1.78
Key Points
The height property only affects the display size of the video element, not the actual video file resolution.
Setting the height property dynamically updates the visual appearance immediately.
The height value must be a positive number representing pixels. Negative values are ignored.
When only height is changed, the browser may maintain aspect ratio depending on CSS settings.
The property reflects the HTML
heightattribute and keeps them synchronized.
Browser Compatibility
The Video height property is supported in all modern browsers that support the HTML5 <video> element, including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 9+ also supports this property.
Conclusion
The HTML DOM Video height property provides a simple way to get and set the height of video elements dynamically using JavaScript. It is commonly used for responsive video players, adaptive layouts, and interactive media applications where video dimensions need to be controlled programmatically.
186 Views
