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 之前包括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>

我的视频没有显示youtubebackground api

1 个答案: