CODEWITHSUNDEEP
cssreactjs
DinhNgocHien
DinhNgocHien

Reputation: 717

button lost after video go full screen

I have a button called record-media which was put in front of a video(video and button are siblings) and show when users hoving mouse on it. However, when the video goes full screen, the button was lost. This is function toggle the video:

toggleFullScreen() {
    let video = document.querySelector('video')

    if (!document.fullscreenElement) {
      video.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }

and this is my css:

.record-media {
  z-index: 1;
  top: -75px;
  position: relative;
  margin-left: 5px;
  text-align: center;
  opacity: 0;
  &:hover {
    opacity: 1;
  }
}

What was I wrong here?

Upvotes: 0

Views: 115

Answers (1)

H S
H S

Reputation: 735

Use a common container for video element and the button itself. And then make that element go full-screen.

Something like this - <div class="video-container"><video/> <button class="record-media">Some-button</button></div>

Reference - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Upvotes: 1

Related Questions