HTMLVideoElement: videoHeight property

動画の内在的な高さを CSS のピクセル数で示す整数値。 要素の readyState が HTMLMediaElement.HAVE_NOTHING の場合、このプロパティの値は 0 です。これは、動画やポスターのフレームサイズ情報がまだ利用できないためです。

ユーザーエージェントは、この要素のメディアの内在的な幅と高さを、このメディアの幅と高さの生のピクセル数から計算し始め、以下のような要素を考慮します。

• このメディアのアスペクト比。
• メディアのクリーンアパーチャ（対象とする縦横比に一致する、メディアを中心とした長方形）。
• 対象とする機器の解像度。
• そのメディア形式が要求する他の要素。

要素がレンダリング動画ではなくポスターフレームを表示している場合、ポスターフレームの内在サイズが <video> 要素のサイズとみなされます。

メディアの内在サイズが変更された時点で、要素の readyState が HAVE_NOTHING でない場合、resize イベントが <video> 要素に送られます。 これは、要素がポスターフレームの表示から動画コンテンツの表示に切り替わるときや、表示される動画トラックが変わるときに発生します。

この例では、resize イベントのハンドラーを作成し、<video> 要素のサイズをそのコンテンツの内在サイズに一致するように変更します。

let 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;
    }
  },
  false,
);

これは videoWidth と videoHeight の両方が 0 でない場合にのみ変更を適用することに注意してください。 これにより、寸法についてまだ利用できる真の情報がない場合に、無意味な変更が適用されるのを避けることができます。