J.Doe J.Doe - 4 months ago 26
Javascript Question

Context menu becomes unclickable above HTML video layer

I have created a custom context menu and would like it to be served as a playlist for my project.

However it becomes unclickable over my video frame.

image

Is this the nature of HTML video tag?

Here's my snippet

<!doctype html>
<html>
<head>
<title>Dee</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

html, body, .container{
height: 100%;
}

body{
font-family: verdana;
font-size: 10px;
}

.container{
background: #f6f6f6;
}

.context-menu {
width: 200px;
height: auto;
box-shadow: 0 0 20px 0 #ccc;
position: absolute;
display: none;
}

.context-menu ul{
list-style: none;
padding: 5px 0 5px 0;
}

.context-menu ul li:not(.separator){
padding: 10px 5px 10px 5px;
border-left: 4px solid transparent;
cursor: pointer;
}

.context-menu ul li:hover{
/*background: #eee;*/
background: #fff;
border-left: 4px solid #666;
}

.separator{
height: 1px;
background: #dedede;
/*background: #fff;*/
margin: 2px 0 2px 0;
}

.videoClass{
background: #fff;
border-color: #fff;
}
</style>
</head>

<body>
<div class="container" oncontextmenu="return showContextMenu(event);">
<div id="contextMenu" class="context-menu">
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li class="separator"></li>
<li>List</li>
</ul>
</div>
<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video>
</div>


<script type="text/javascript">
window.onclick = hideContextMenu;
window.onkeydown = listenKeys;
var contextMenu = document.getElementById('contextMenu');

function showContextMenu(){
contextMenu.style.display = 'block';
contextMenu.style.left = event.clientX + 'px';
contextMenu.style.top = event.clientY + 'px';
return false;
}

function hideContextMenu(){
contextMenu.style.display = 'none';
}

function listenKeys(event){
var keyCode = event.which || event.keyCode;
if (keyCode == 27) { //27 means escape key
hideContextMenu();
}
}
</script>
</body>
</html>

Answer

New Answer

I found that an even simpler solution to your problem exists. If you just put the video tag before the context menu, that does the trick:

<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video>
<div id="contextMenu" class="context-menu">
    <ul>
      <li>List</li>
      <li>List</li>
      <li>List</li>
      <li class="separator"></li>
      <li>List</li>
    </ul>
</div>

Original Answer

In my limited experience I haven't loved using z-indexes, so I'll look for another solution, but I put styles of z-index: 1 on video class and z-index: 2 on the context menu class, and that did that trick (in chrome at least, I didn't try any other browsers).