1

How to display my html element, for example a button, above fullscreen mode youtube iframe video via html, java-script? Not work: z-index: 2147483647; translateZ(+2000000000000px)

inffinn
  • 21
  • 3
  • Welcolme, see how to ask a question : https://stackoverflow.com/help/how-to-ask so that everyone can understand your question and help you. – Dylan KAS Jul 10 '19 at 12:08

1 Answers1

1

What you will need to do is use the z-index property in CSS, and also absolute positioning for your button.

What you can do is assign classes to your elements:

<html>
  <iframe class="video">
    ...
  </iframe>
  <button class="bt">
  </button>
</html>

In CSS:

.video {
  z-index: 0;
}

.bt {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  z-index: 100;
}

This should show the button on top of the iFrame.

ThreeJP
  • 21
  • 3
  • Thanks for the answer. I do the same, but it not work in full-screen mode. – inffinn Jul 10 '19 at 11:10
  • 1
    Oh, i do not think what you are trying to achieve is possible, if you are in the fullscreen mode of the iFrame. Thought your window is fullscreen and the iFrame is hosted in your window. – ThreeJP Jul 10 '19 at 11:13