HTMLビデオコントロールがヘッダーをオーバーレイする問題の解決方法

CSSのpositionプロパティを使用する方法: ヘッダー要素に対して、以下のCSSコードを追加します。

header {
 position: relative;
 z-index: 1;
}

ビデオ要素に対して、以下のCSSコードを追加します。

video {
 position: relative;
 z-index: 0;
}

上記のコードは、ヘッダー要素のz-indexを1に設定し、ビデオ要素のz-indexを0に設定することで、ヘッダー要素をビデオの上に表示させる方法です。

JavaScriptを使用する方法: JavaScriptを使用して、ビデオ要素の表示位置を調整することも可能です。以下は、簡単な例です。

const header = document.querySelector('header');
const video = document.querySelector('video');
video.style.marginTop = header.offsetHeight + 'px';

上記のコードは、ビデオ要素の上部マージンをヘッダー要素の高さと同じ値に設定することで、ビデオコントロールがヘッダーの下に表示されるようにします。