HTML DOM Video width Property - Coding

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 DOM Video width Property Example Output

Supported Browsers:

Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML DOM Video volume Property
HTML \| <input> width Attribute
HTML \| returnValue Event Property
HTML \| <area> type Attribute
HTML \| <area> download Attribute

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9