的YouTube即菜單修復

Question

我有以下代碼

<script> 
window.onload = function(){ 
var a = document.getElementsByTagName("a"); 
for(var i=0; i<a.length; i++){ 
    if(!/#ytplayer/.test(a[i].href)) continue; 
    var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/); 
    if(link) (function(vidId){ 
     a[i].onclick = function(){ 
      player.loadVideoById(vidId); 
     } 
    })(link[1]); 
} 
} 

// 2. This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// 3. This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
var player; 

function onYouTubePlayerAPIReady() { 
player = new YT.Player('player', { 
    height: '480', 
    width: '853', 
    videoId: '963puDdR0bY', 
    wmode: 'transparent', 
    rel: '0', 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
}); 
} 

// 4. The API will call this function when the video player is ready. 


function onPlayerReady(event) { 
event.target.playVideo(); 
} 

// 5. The API calls this function when the player's state changes. 
// The function indicates that when playing a video (state=1), 
// the player should play for six seconds and then stop. 
var done = false; 

function onPlayerStateChange(event) { 
if (event.data == YT.PlayerState.PLAYING && !done) { 
    setTimeout(stopVideo, 60000); 
    done = true; 
} 
} 

function stopVideo() { 
player.stopVideo(); 
} 
</script> 

<script> 

$(document).ready(function() { 

$.ajax({ 
    type: "POST", 
    url: "/publicPortal/restservices/tracking/click", 
    data: { docId: "enPubIntentionalInvesting", docType: "tvSpots" }, 
    contentType: "text/plain" 
}); 

}); 
</script> 

和IM調用圖像這裏

<div id="player" style="padding-left:40px; z-index:-1;"></div> 
</div> 

<div id="nav" style="height:200px; padding-top:20px; padding-left:40px !important;"> 

<a href="#ytplayer" > 
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" /> 
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a> 

    <a href="#ytplayer" > 
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" /> 
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a> 

    <a href="#ytplayer" > 
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" /> 
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a> 
</div> 

您可能會注意到我有兩個圖像存在，但它似乎代碼需要從拉你管，但我想要一個自定義圖像。

我的問題是在ie菜單區域下的YouTube播放器，IVE環顧四周修復，但大多數是面向單獨的內聯框架。

我嘗試將wmode添加到api調用中，但它似乎沒有工作！任何幫助將是偉大的！

Answer 1

所以我想通了！ 您需要將playerVars添加到該函數中，如此;

function onYouTubePlayerAPIReady() { 
player = new YT.Player('player', { 
height: '480', 
width: '853', 
videoId: '5hewAwxIy9k', 
playerVars: { 
    controls: 1, 
    showinfo: 0 , 
    modestbranding: 0, 
    rel: 0, 
    wmode: "opaque" 
}, 
events: { 
'onReady': onPlayerReady, 
'onStateChange': onPlayerStateChange 
} 
}); 
}