html - Youtube 嵌入 iframe，使用 Chrome 我得到一个黑框

Question

我想在 Bootstrap 中嵌入一个 youtube 视频 one page scroll网页，正好在 carousel视频 slider 。
我的 Chrome 和 Firefox 都有问题(使用 Safari 没问题)。
这是我的代码:

   <section class="videos">
    <div class="container">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
            <!-- Indicators -->
            <ol class="carousel-indicators" style="top:125%">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
<div class="carousel-inner" style="top:100px;">
              <div class="item active">
                <div style="text-align:center;">
                  <iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
                  <div class="carousel-caption">
                  </div>
                </div>
              </div>
              <div class="item">
                <div style="text-align:center;">
                  <iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
                  <div class="carousel-caption">
                  </div>
                </div>
              </div>
          </div>

我得到两个错误:

在我的控制台中，我得到:

Blocked a frame with origin "https://www.youtube-nocookie.com" from accessing a frame with origin "http://www.domain.com".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Uncaught Error: Error calling method on NPObject.

视频显示为黑框。

我该怎么办？谢谢

Answer 1

我建议您对要嵌入网站的视频使用对象，而不是 iframe。它具有更好的独立于网络浏览器的行为，并且可以与其他支持共享的视频提供商(dailymotion、vimeo)一起使用

<embed width="756" height="461" style="display: block;" src="http://www.youtube.com/v/nlcIKh6sBtc?autohide=1&version=3?autohide=1&version=3&autoplay=1" type="application/x-shockwave-flash" bgcolor="#000000" scale="scale" allowfullscreen="true" salign="tl" allowscriptaccess="never" wmode="opaque">

上面的代码片段是如何在具有各种参数的网页上共享 youtube 视频的示例。希望这有帮助。