如何通过 JS、HTML 在全屏 iframe YouTube 视频上方显示按钮

【问题标题】：How to display a button above a full-screen iframe YouTube video via JS, HTML如何通过 JS、HTML 在全屏 iframe YouTube 视频上方显示按钮
【发布时间】：2019-11-19 23:50:35
【问题描述】：

如何通过 html、java-script 在全屏模式 youtube iframe 视频上方显示我的 html 元素，例如按钮？不行： z-index：2147483647； translateZ(+2000000000000px)

【问题讨论】：

欢迎您，看看如何提问：stackoverflow.com/help/how-to-ask，以便大家理解您的问题并帮助您。

标签： javascript html youtube-api youtube-data-api

【解决方案1】：

您需要做的是使用 CSS 中的 z-index 属性，以及按钮的绝对定位。

你可以做的是给你的元素分配类：

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

在 CSS 中：

.video {
  z-index: 0;
}

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

这应该会在 iFrame 顶部显示按钮。

【讨论】：

感谢您的回答。我也是这样做的，但它不能在全屏模式下工作。
哦，如果您处于 iFrame 的全屏模式，我认为您想要实现的目标是不可能的。以为您的窗口是全屏的，并且 iFrame 托管在您的窗口中。