0

Web ページの 1 つに YouTube ビデオ プレーヤーが埋め込まれている Web アプリケーションを開発しています。再生中のビデオ (全画面表示) の上に追加情報を表示しようとしています。追加情報とは、テキストまたは画像を含むメッセージを意味します。埋め込みプレーヤーのコードは次のようになります。

<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 に答える