2014-01-22 33 views
1

我想嵌入一個YouTube視頻在引導one page scroll網頁,正好在carousel視頻滑塊。
我對Chrome和Firefox都有問題(使用Safari沒有問題)。
這裏是我的代碼:Youtube嵌入iframe,使用Chrome我得到一個黑盒子

<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. 
    
  • 的視頻,顯示爲黑盒子。

我該怎麼辦?謝謝

回答

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視頻的例子各種參數。希望這有助於。