javascript - 我的视频未通过 youtubebackground api 显示

Question

我有一个问题，这个问题在 1 周后仍然存在，无法发现为什么我的视频没有使用 youtubebackground api 显示， 基本上我正在使用 bootstrap 并为我的视频定义了一个容器 像这样:

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

    </div>
</section>

然后我使用了 youtubeBackgroundapi 这里是脚本的顺序:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.youtubebackground.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.themepunch.tools.min.js" type="text/javascript"></script>
<script src="js/jquery.themepunch.revolution.min.js" type="text/javascript"></script>
<script src="js/isotope.pkgd.min.js"></script>
<!-- this is where we put our custom functions -->
<script type="text/javascript" src="js/functions.js"></script>
<script src="js/app.js"></script>

我的 app.js 是我放置与视频行为相关的 javascript 代码的地方

像这样:

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

最后我改变了我的CSS，就像文档所说的那样:

#video {
  position: relative;
  background: transparent;
}

.ytplayer-container {
  position: absolute;
  top: 0;
  z-index: -1;
}

我不知道为什么它没有显示，我只能看到 div 的白色内容，里面什么都没有，我需要在服务器中运行我的应用程序才能让它工作吗？

Answer 1

您是否以正确的顺序包含了正确的库？ 注意，您应该在之前包含 jquery youtube 后台脚本(查看我的 HTML)。我能够让它在JSfiddle中工作以及 Stack Overflow 代码片段(见下文)

编辑 另一个差异是您包含了 Jquery 1.11.3，而 Jquery Youtube 后台文档包含 1.10.2。也许这就是造成差异的原因？

$(document).ready(function() {
  $('#video').YTPlayer({
    fitToBackground: true,
    videoId: 'mcFYvy0L2vI',
    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>
<script src="https://cdn.rawgit.com/rochestb/jQuery.YoutubeBackground/dbdfa723/src/jquery.youtubebackground.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content_section">
    <div class="embed-responsive embed-responsive-16by9" id="video">

    </div>
</section>