Question

大家好我玩youtube视频背景api，想在我已经设置的div的背景上设置我的页面中的视频，所以我有这个html：

<div class="embed-responsive embed-responsive-16by9" id="video">

</div>

的javascript

$(document).ready(function () {
    $('#video').YTPlayer({
        fitToBackground: true,
        videoId: 'LSmgKRx5pBo',
        playerVars: {
            modestbranding: 0,
            autoplay: 1,
            controls: 1,
            showinfo: 0,
            branding: 0,
            rel: 0,
            autohide: 0,
            start: 10
        }
    });
})

这是我使用api的link，我没有得到任何控制台错误，我做错了什么？

Answer 1

Here是一个工作小提琴，视频上方有一些文字和一个按钮：

$(document).ready(function() {
  $('#video').YTPlayer({
    fitToBackground: true,
    videoId: 'LSmgKRx5pBo',
    playerVars: {
      modestbranding: 0,
      autoplay: 1,
      controls: 1,
      showinfo: 0,
      branding: 0,
      rel: 0,
      autohide: 0,
      start: 10
    }
  });
})

#video {
  position: relative;
  background: transparent;
}

.ytplayer-container {
  position: absolute;
  top: 0;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/rochestb/jQuery.YoutubeBackground/dbdfa723/src/jquery.youtubebackground.js"></script>
<div class="embed-responsive embed-responsive-16by9" id="video">
  <p>Some text</p>
  <input type="submit" value="some button" />
</div>

Youtube视频api视频没有显示出来

1 个答案: