Open In App

HTML DOM Video width Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 video width property example

HTML DOM Video width Property Example Output

Supported Browsers: 


Last Updated : 27 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads