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来相应地对样式进行分层。

如何在我网页上嵌入的完整屏幕的YouTube视频上显示信息？

1 个答案: