deoHeight - Web APIs - MDN Web Docs

• Skip to main content
• Skip to search

HTMLVideoElement: videoHeight property Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

• Learn more
• See full compatibility
• Report feedback

The HTMLVideoElement interface's read-only videoHeight property indicates the intrinsic height of the video, expressed in CSS pixels. In simple terms, this is the height of the media in its natural size.

In this article

• Value
• Examples
• Specifications
• Browser compatibility

Value

An integer value specifying the intrinsic height of the video in CSS pixels. If the element's readyState is HTMLMediaElement.HAVE_NOTHING, then the value of this property is 0, because neither video nor poster frame size information is yet available.

About intrinsic width and height

A user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including:

• The media's aspect ratio.
• The media's clean aperture (the sub-rectangle centered within the media that matches the target aspect ratio).
• The target device's resolution.
• Any other factors required by the media format.

If the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic size is considered to be the size of the <video> element.

If at any time the intrinsic size of the media changes and the element's readyState isn't HAVE_NOTHING, a resize event will be sent to the <video> element. This can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes.

Examples

This example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents.

jslet v = document.getElementById("myVideo"); v.addEventListener("resize", (ev) => { let w = v.videoWidth; let h = v.videoHeight; if (w && h) { v.style.width = w; v.style.height = h; } });

Note that this only applies the change if both the videoWidth and the videoHeight are non-zero. This avoids applying invalid changes when there's no true information available yet for dimensions.

Specifications

Specification
HTML# dom-video-videoheight-dev

Browser compatibility

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Sep 18, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. The HTML DOM API
2. HTMLVideoElement
3. Instance properties
   1. disablePictureInPicture
   2. height
   3. poster
   4. videoHeight
   5. videoWidth
   6. width
4. Instance methods
   1. cancelVideoFrameCallback()
   2. getVideoPlaybackQuality()
   3. requestPictureInPicture()
   4. requestVideoFrameCallback()
5. Events
   1. enterpictureinpicture
   2. leavepictureinpicture
   3. resize
6. Inheritance
   1. HTMLMediaElement
   2. HTMLElement
   3. Element
   4. Node
   5. EventTarget
7. Related pages for HTML DOM
   1. BeforeUnloadEvent
   2. DOMStringMap
   3. ErrorEvent
   4. HTMLAnchorElement
   5. HTMLAreaElement
   6. HTMLAudioElement
   7. HTMLBRElement
   8. HTMLBaseElement
   9. HTMLBodyElement
   10. HTMLButtonElement
   11. HTMLCanvasElement
   12. HTMLDListElement
   13. HTMLDataElement
   14. HTMLDataListElement
   15. HTMLDialogElement
   16. HTMLDivElement
   17. HTMLDocument
   18. HTMLElement
   19. HTMLEmbedElement
   20. HTMLFieldSetElement
   21. HTMLFormControlsCollection
   22. HTMLFormElement
   23. HTMLFrameSetElement Deprecated
   24. HTMLHRElement
   25. HTMLHeadElement
   26. HTMLHeadingElement
   27. HTMLHtmlElement
   28. HTMLIFrameElement
   29. HTMLImageElement
   30. HTMLInputElement
   31. HTMLLIElement
   32. HTMLLabelElement
   33. HTMLLegendElement
   34. HTMLLinkElement
   35. HTMLMapElement
   36. HTMLMediaElement
   37. HTMLMenuElement
   38. HTMLMetaElement
   39. HTMLMeterElement
   40. HTMLModElement
   41. HTMLOListElement
   42. HTMLObjectElement
   43. HTMLOptGroupElement
   44. HTMLOptionElement
   45. HTMLOptionsCollection
   46. HTMLOutputElement
   47. HTMLParagraphElement
   48. HTMLPictureElement
   49. HTMLPreElement
   50. HTMLProgressElement
   51. HTMLQuoteElement
   52. HTMLScriptElement
   53. HTMLSelectElement
   54. HTMLSourceElement
   55. HTMLSpanElement
   56. HTMLStyleElement
   57. HTMLTableCaptionElement
   58. HTMLTableCellElement
   59. HTMLTableColElement
   60. HTMLTableElement
   61. HTMLTableRowElement
   62. HTMLTableSectionElement
   63. HTMLTemplateElement
   64. HTMLTextAreaElement
   65. HTMLTimeElement
   66. HTMLTitleElement
   67. HTMLTrackElement
   68. HTMLUListElement
   69. HTMLUnknownElement
   70. HashChangeEvent
   71. History
   72. ImageData
   73. Location
   74. MessageChannel
   75. MessageEvent
   76. MessagePort
   77. Navigator
   78. PageRevealEvent
   79. PageSwapEvent
   80. PageTransitionEvent
   81. Plugin Deprecated
   82. PluginArray Deprecated
   83. PromiseRejectionEvent
   84. RadioNodeList
   85. TimeRanges
   86. UserActivation
   87. ValidityState
   88. Window
   89. WorkletGlobalScope
8. Guides
   1. Using microtasks in JavaScript with queueMicrotask()
   2. In depth: Microtasks and the JavaScript runtime environment