Question

i have the following code

<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>

and im calling the images here

<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>

you may notice i have two images there, but it seems the code needs to pull from you tube, but i wanted a custom image.

My issue is in ie the menu area goes UNDER the youtube player, ive looked around for fixes, but most are geared towards separate iframes.

ive tried adding wmode into the api call but its doesnt seem to be working! any help would be great!

Answer 1

so i figured it out!
you need to add playerVars to the function, like so;

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
}
});
}