Open In App

HTML <video> height Attribute

Last Updated : 20 Feb, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

Next Article

Similar Reads