CODEWITHSUNDEEP
javascripthtmlyoutube-apiyoutube-data-api
inffinn
inffinn

Reputation: 21

How to display a button above a full-screen iframe YouTube video via JS, HTML

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)

Upvotes: 1

Views: 1445

Answers (1)

ThreeJP
ThreeJP

Reputation: 21

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.

Upvotes: 1

Related Questions