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

目次

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

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

<video controls src="sample.mp4">

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

再生ボタンをクリックできない

z-indexで解決

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

video {
  z-index:2;
}

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

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

再生ボタンをくりっくできるようになった

z-indexについての参考ページ

前へ

【JS】アンカーへの画面遷移時に表示位置がズレてしまうときの対策

次へ

【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする