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.

  • How do I trigger the browser context menu on an element. (As if the user right-clicked)
  • How to add a custom right-click menu to a webpage?
  • jQuery context menu get clicked item
  • Is there a close event for the browser contextmenu
  • Webkit: contextmenu / click handling bug workaround?
  • How to disable right-click context-menu in javascript
  • 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>
    

  • How to re-enable the context menu in this case?
  • Is it possible to override the context-menu in a browser?
  • CKEditor - Add Context Menu Item to Images
  • invoke primefaces context menu from java script
  • Any way to disable tooltip (title attribute) when right click (contextmenu)?
  • Adding copy & paste functionalities to a custom menu of a webapp
  • One Solution collect form web for “Context menu becomes unclickable above HTML video layer”

    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).