videoタグにcontrolsを設定したのに再生ボタンを押せないとき

Mon, 06 Dec 2021 21:44:57 +0900

MP4ビデオの再生ボタンがクリックできない

WEBサイトにMP4の動画を設置しました。再生／停止や全画面再生などのメニューを表示させるため、****タグにcontrolsを加えました

<video controls src="sample.mp4">

しかし、以下のように再生ボタンにカーソルを重ねても指のマークに変わらず、クリックできません。

原因はヘッダーをページ上部に固定していたせいかもしれませんが、controlsで表示されるメニューのレイヤーが前面になっていなかったせいのようです。これを解決するのが**スタイルシート（CSS）**で前面・背面のレイヤーを操作するz-index。

video {
  z-index:2;
}

数字が大きくなるほど前面（手前）に位置することを示します。絶対的に前面にするなら、1000とか極端な値を設定すれば良いかと思います。逆に、よく見かけるz-index:1;は最背面で、前後でいう一番奥を指定していることを表しています。

この、z-indexで動画を最前面にすることで再生ボタンをクリックすることができました。