VideoJS: Can't click on elements that are on top/overlay of the video

Question

I'm working with VideoJS and Angular 4 and I need some custom overlays on top of the video. I successfully created all overlays and hooked them to events on the Angular component. It works perfectly except for when it is in fullcsreen. When I put the video in fullscreen, the overlays disappear and I can only use the default player buttons. So I added a big z-index to the overlays and they started appearing. But whenever I click on them, nothing happens. Not even the cursor changes to a pointer, as per the CSS. I have tried various things like the videojs overlay plugin, but that does not work, as it does not let me associate an action to an element. I've tried putting the overlay content inside the video tag, but then it just disappears completely. I've tried going through the Chrome Dev Tools web inspector and manually removing the z-index of any videojs element that is on the way. But nothing ever happens. I can always see the buttons I added, but never click on them. Here is my code:

 .extra-options { position: absolute; color: #fff; bottom: 20px; right: calc(100%/2 - 150px); font-size: 50px; cursor: pointer; z-index: 99999999999999999; } .player-container { width: 100%; height: calc(100vh - 190px); position: relative; video { width: 100%!important; height: 100%!important; margin: 0 auto; } } 

 <div class="player-container"> <video id="video" class="video-js vjs-default-skin" controls></video> <div class="extra-options" (click)="showExtra()">More options</div> </div> 

That "extra options" div appears and works correctly when we are not on fullscreen. When on fullscreen, it appears correctly but I can never click on it. I should add a very important detail: these actions need to have a function in the Angular component. So "showExtra()" should be a function defined in the player .ts file.

Answer 1

instead of taking the entire block making the div as inline(take only the width of the video player) and aligning to right with right: 1px; will do.please find the snippet useful.

 const showExtra = () => { console.log("clicked") } 

 .extra-options { position: absolute; color: red; bottom: 20px; right: 1px; font-size: 20px; cursor: pointer; } .player-container { position: relative; display: inline-block; video { height: 100%!important; margin: 0 auto; } } 

 <div class="player-container"> <video id="video" class="video-js vjs-default-skin" controls> </video> <div class="extra-options" onclick="showExtra()">More options</div> </div> 

Answer 2

If you put the "extra-options" div inside the video element it should be clickable.

<div class="player-container">
    <video id="video" class="video-js vjs-default-skin" controls>
        <div class="extra-options" (click)="showExtra()">More options</div>
    </video>
</div>

I didn't work with video-js a long time, if that doesn't work try adding the element programmatically: ( reference )

var myPlayer = videojs('my_id').ready(function(){
  var player = this;

  player.el().appendChild(CUSTOM_ELEMENT_HERE);

});

Answer 3

  .extra-options { position: relative; color: black; font-size: 50px; cursor: pointer; z-index: 99999999999999999; } .player-container { width: 100%; height: calc(100vh - 190px); position: relative; } video#video { position: absolute; } 

  <div class="player-container"> <video id="video" class="video-js vjs-default-skin" controls></video> <div class="extra-options" (click)="showExtra()">More options</div> </div>