How to position an element in front of full screen video

plugandplay 0
Viewed 22

I'm trying to position html element in front of a video in full screen but it's only working when the element isn't in full screen mode.

how can I fix it?

code:

HTML

    <div class="container">
      <div class="video">
      <video src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>
      </div>
      <div class="controls">
      <h1>Text1</h1>
      </div>
    </div>
    <button>Click</button>
    <script src="src/script.js"></script>

CSS

body {
  background: transparent;
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container{
  display: grid;
}
.video, .controls{
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  }
  .controls{
    z-index: 9999999999999 !important;
  }

Js

const video = document.querySelector("video");
const button = document.querySelector("button");
button.addEventListener("click", handelFullScreen);

function handelFullScreen(){
  video.requestFullscreen().catch(e => console.log(e));
  return;
}
javascript css html
1 Answers

The answer in my case was to just to "make the container fullscreen, not just the video" - Jaromanda X.

Rather than selecting the only video, I should select the container that has all the element I want to include in full screen.

JS

const video = document.querySelector(".container"); // change
const button = document.querySelector("button");
button.addEventListener("click", handelFullScreen);

function handelFullScreen(){
  video.requestFullscreen().catch(e => console.log(e));
  return;
}

console.log(video)

Thank you Jaromanda X

plugandplay0
Related