HTMLVideoElement.height — Eigenschaft · JavaScript-Referenz

Signatur

HTMLVideoElement.height

Beschreibung

Die Eigenschaft height spiegelt das HTML-Attribut height des <video>-Elements wider. Sie liefert eine vorzeichenlose ganze Zahl, die die Anzeigehöhe des Videobereichs in CSS-Pixeln angibt. Wenn du sie setzt, wird das Attribut im DOM sofort aktualisiert, und umgekehrt.

Wichtig ist der Unterschied zu videoHeight: height beschreibt die gewünschte Darstellungsgröße im Layout. videoHeight ist dagegen die tatsächliche (intrinsische) Höhe des Videostreams in Pixeln und nur lesbar. Ist kein height-Attribut gesetzt, liefert die Eigenschaft 0, auch wenn das Video sichtbar gerendert wird.

Typische Anwendungen sind Player, die ihre Größe per Skript festlegen, das Übernehmen des Seitenverhältnisses aus den Video-Metadaten oder das Reservieren von Platz im Layout, damit beim Laden nichts verspringt (Layout-Shift). Für responsive Layouts ist CSS (width: 100%; height: auto; oder aspect-ratio) meist die bessere Wahl. Moderne Browser leiten aus den Attributen width und height zusätzlich automatisch ein Seitenverhältnis ab.

Rückgabewert

Typ

number

Beschreibung

Eine nicht negative ganze Zahl: die Höhe in CSS-Pixeln laut height-Attribut. Ohne Attribut oder bei ungültigem Wert ist sie 0. Wenn du einen Wert zuweist, wird er in eine ganze Zahl umgewandelt und als Attribut geschrieben.

Beispiele

Höhe lesen und setzen

// HTML: <video id="player" src="film.mp4" width="640" height="360"></video>
const video = document.getElementById('player');

console.log(video.height); // aus dem Attribut

video.height = 480;
console.log(video.getAttribute('height'));

360 "480"

Anzeigehöhe aus dem Seitenverhältnis des Videos berechnen

const video = document.querySelector('video');
video.width = 800;

video.addEventListener('loadedmetadata', () => {
  // videoHeight/videoWidth = intrinsische Größe des Streams
  const ratio = video.videoHeight / video.videoWidth;
  video.height = Math.round(video.width * ratio);
  console.log(`${video.width}×${video.height}`);
});

800×450 // bei einem 16:9-Video

Unterschied zwischen height, videoHeight und gerenderter Höhe

const video = document.createElement('video');
video.src = 'clip.mp4';
document.body.append(video);

video.addEventListener('loadedmetadata', () => {
  console.log('height:', video.height);            // kein Attribut gesetzt
  console.log('videoHeight:', video.videoHeight);  // Größe des Streams
  console.log('gerendert:', video.getBoundingClientRect().height);
});

height: 0 videoHeight: 720 gerendert: 720

// Wichtig · Fallstricke

Nicht mit videoHeight verwechseln: height gibt nur den Attributwert zurück. Ohne Attribut ist sie 0, egal wie groß das Video tatsächlich dargestellt wird. Die gerenderte Größe liefern getBoundingClientRect() oder clientHeight.
CSS hat Vorrang: Setzt ein Stylesheet height (z. B. height: auto oder einen festen Wert), überschreibt das die Attributgröße bei der Darstellung. Die Eigenschaft ändert sich dadurch nicht.
Es gibt nur Pixelwerte. Prozentangaben wie "50%" sind im Attribut ungültig und ergeben 0. Negative Werte ebenfalls.
Das Video wird nicht verzerrt: Passt das Verhältnis aus width und height nicht zum Stream, entstehen Letterbox-Ränder (steuerbar über object-fit).
Kompatibilität: Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLVideoElement.width HTMLVideoElement.videoHeight HTMLVideoElement.videoWidth HTMLVideoElement Element.getBoundingClientRect() HTMLEmbedElement.height