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についての参考ページ