HTML <video> height Attribute

Last Updated : 20 Feb, 2024

The height attribute in the HTML <video> element specifies the height of the video player in pixels, controlling the vertical size of the video display area within the webpage.

HTML <video> height Attribute Syntax:

<video height="pixels">

HTML <video> height Attribute Values:

It contains single-value pixels which set the height of the video frame.

HTML <video> height Attribute Example:

Here is an example of using the HTML <video> height Attribute to set the height of the webpage.

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML video height Attribute</title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
          GeeksforGeeks 
        </h1> 
  
        <h3>HTML video height Attribute</h3> 
  
        <video width="400" 
               height="200" 
               controls> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                type="video/mp4"> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                type="video/ogg"> 
        </video> 
    </center> 
</body> 
  
</html>

Output:

HTML <video> height Attribute Example Explanation:

The height attribute in the <video> element is specified as height=”200″.
This attribute determines the vertical dimension of the video player displayed on the webpage.
In the provided example, the video player’s height is set to 200 pixels.
This dimension ensures the video player’s size is proportional to the width (specified as width=”400″) for balanced playback.
Adjusting the height attribute allows fine-tuning of the video player’s aspect ratio within the webpage layout.

Note:

Downsizing a large size video with the height and width attributes forces users to download the original video. The best way to rescale videos is with a program, before using it on a page.

HTML <video> height Attribute Use cases:

1. How to set the height and width of the video player in HTML5 ?

Use the <video> element with attributes width and height, specifying pixel values to set dimensions for the player.

2.How to add video in HTML5 ?

Use <video> element with attributes width and height, providing video sources with <source> tags inside, specifying file paths and MIME types for compatibility.

HTML <video> height Attribute Supported Browsers:

The browser supported by HTML <video> height Attribute are listed below:

Google Chrome
Internet Explorer
Firefox
Safari
Opera

HTML DOM onblur Event

jit_t

Improve

Article Tags :