如何在我的网页上嵌入全屏幕YouTube视频顶部呈现信息？

问题描述

我正在开发一个网络应用程序，我在其中一个网页中嵌入了YouTube视频播放器。我正试图在播放视频之上呈现额外的信息（全屏幕）。通过额外的信息，我的意思是带有一些文字或图像的信息。
嵌入式播放器的代码与此类似：

 < div id =playeralign =中心>< / DIV> 
 
< noscript>此功能需要JavaScript，请将其打开< / noscript> 
 
< script> 
 // 2.此代码异步加载IFrame Player API代码。 
 var tag = document.createElement（'script'）; 
 
 var uid; 
 var firstStatus = 1; 
 var firstTimeStamp = 0; 
 //播放器的当前状态
 var state = -1; 
 
 tag.src =//www.youtube.com/iframe_api; 
 var firstScriptTag = document.getElementsByTagName（'script'）[0]; 
 firstScriptTag.parentNode.insertBefore（tag，firstScriptTag）; 
 
 // 3.此函数创建一个< iframe> （和YouTube播放器）
 // API代码下载后。 
 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，$ b $'onStateChange'：onPlayerStateChange 
} 
 }）; 
} 
  

我打算在播放视频的顶部显示额外信息。
我希望我很清楚。
$ b $ p附加代码
样式（CSS）：

 <风格> 
 body {
 padding-top：60px; / * 60px使容器一直到顶栏的底部* / 
 background-color：＃222222; 
颜色：＃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.pngalt =笑脸height =42width =42> 
  

解决方案

添加？wmode = opaque 到url的结尾，以便使用 z-index 。然后在你的CSS中使用 z-index 来对你的样式进行相应的处理。

I am developing a web application where I have a youtube video player embedded in one of my web pages. I am trying to present extra information on top of the playing video (on full screen). By extra information I mean a message with some text or maybe an image.The code for the embedded player is similar to this:

<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
        }
      });
    }

I intend to present the extra information on top of a playing video.I hope I was clear enough. Thanks!

Extra code:The style (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>

And the image:

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

解决方案

Add ?wmode=opaque to the end of the url to enable the use of z-index. Then use z-index in your CSS to layer your styles accordingly.

这篇关于如何在我的网页上嵌入全屏幕YouTube视频顶部呈现信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！