CODEWITHSUNDEEP
javascripthtmlcssangularvideo.js
Luís Ferreira
Luís Ferreira

Reputation: 2596

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

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.

Upvotes: 5

Views: 3228

Answers (3)

godfather
godfather

Reputation: 1563

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

Upvotes: 0

karthik
karthik

Reputation: 1098

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>

Upvotes: 2

yotke
yotke

Reputation: 1208

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

});

Upvotes: 0

Related Questions