如何在嵌入我网页的全屏 youtube 视频上显示信息？

Question

我正在开发一个网络应用程序，其中我的一个网页中嵌入了一个 youtube 视频播放器。我正在尝试在播放视频的顶部（全屏）显示额外信息。额外信息是指带有一些文本或图像的消息。 嵌入式播放器的代码类似这样：

<div id="player" align="center"></div>

  <noscript>This feature requires Javascript, please turn it on</noscript>

  <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    var uid;
    var firstStatus = 1;
    var firstTimeStamp = 0;
    // Current state of the player
    var state = -1;

    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    var show = getVarsFromUrl()['showId'];
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: show,//'a8u_a9q978M',//'u1zgFlCw8Aw',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

我打算在正在播放的视频上展示额外的信息。 我希望我足够清楚。谢谢！

额外代码： 样式（CSS）：

<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    background-color: #222222;
    color: #C0C0C0;
  }
  img {
    position:relative;
    left:500px;
    top:500px;
    z-index:5;
  }
  iframe {
    position:absolute;
    left:500px;
    top:500px;
    z-index:-1;
  }
</style>

还有图片：

<img src="smiley.png" alt="Smiley face" height="42" width="42">

Answer 1

在网址末尾添加?wmode=opaque，以启用z-index。然后在你的 CSS 中使用 z-index 来相应地分层你的样式。