优酷视频 api 视频未显示

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 的链接，我没有收到任何控制台错误，我做错了什么？？

Answer 1

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

$(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>