0

我正在开发一个 Web 应用程序，其中我的一个网页中嵌入了一个 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">
4

1 回答 1

0

添加?wmode=opaque到 url 的末尾以启用z-index. 然后z-index在您的 CSS 中使用相应地对样式进行分层。

于 2013-03-25T20:12:54.650 回答