Youtube API display random video & thumbnail

Question

I have the videos loading and playing, but i can't get the thumbnail to display at the side of the video.

Here is the code:

<script>
function rotateYT() {
    var videos = ['usewkEuDVjU',
                  'IL9iemWe_g8',
        'gGMi60M5O98',
        'SN3CgQvqzAo',
        'W1YFnHjjG8s',
        'l9qMYZvG7EE',
        'j_ljOjr54gc',
        'MhczSQtIgNM',
        'j_ljOjr54gc',
        'T-GPePrh7rw',
        'LTNQFYARFOk',
        'ehciyVuCyvs',
        'g4xSmh0LF6Y',
        'shM7cV-fR9o',];

    var index=Math.floor(Math.random() * videos.length);
    return videos[index];
}
</script>

<script>

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);





    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
    var videoID = rotateYT();
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          border: '0',
          version: '3',
          showinfo: '0',
          rel: '0',
          controls: '0',
          loop: '0',
          allowfullscreen: '0',
          videoId: videoID,



          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

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

  // autoplay video
    function onPlayerReady(event) {

    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            window.location="mainvids1computers.html" // redirect


        }
    }
</script>



<div id="player" style="position:fixed; top:0%; left:0%; width:100px; height:100px;">


<img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style="top:100px; left:100px; width:120px; height:180px;">


</div>

My problem is appending the +videos[index]+ with the img tag. All i get at present is the default img, So its obviously not getting the video id and appending correctly. How can I fix this?

Answer 1

Just an update on ewwink's answer for Anybody whome is climbing the same ladder as myself...

Here you can now see the Thumbnail 1st without loading the video. then on mouse event the video loads...

Heres the code...

<div id="player" style="position:fixed; top:0%; left:0%; width:100px; height:100px;" allowfullscreen>
</div>

<div id="ewwinkthumbnailed-it">
<img id="player-thumb" src="https://img.youtube.com/vi/default.jpg" style="position:absolute; top:0px; left:120px; width:100px; height:100px;" onmouseover="change();">
</div>


<script>
function rotateYT() {
  var videos = ['usewkEuDVjU',
    'IL9iemWe_g8',
    'gGMi60M5O98',
    'SN3CgQvqzAo',
    'W1YFnHjjG8s',
    'l9qMYZvG7EE',
    'j_ljOjr54gc',
    'MhczSQtIgNM',
    'j_ljOjr54gc',
    'T-GPePrh7rw',
    'LTNQFYARFOk',
    'ehciyVuCyvs',
    'g4xSmh0LF6Y',
    'shM7cV-fR9o',
  ];

  var index = Math.floor(Math.random() * videos.length);
  return videos[index];
}
// get random video ID
var videoID = rotateYT();

document.getElementById('player-thumb').src = 'https://img.youtube.com/vi/'+ videoID +'/1.jpg';

// 2. This code loads the IFrame Player API code asynchronously.



function change() {
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// create youtube player
var player;

window.onYouTubePlayerAPIReady = function() {
  player = new YT.Player('player', {
    height: '100px',
    width: '100px',
    border: '0',
    version: '3',
    showinfo: '0',
    rel: '0',
    controls: '1',
    loop: '0',
    allowfullscreen: '0',
    videoId: videoID,

    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

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

// autoplay video
function onPlayerReady(event) {

}

// when video ends
function onPlayerStateChange(event) {
  if(event.data === 0) {
    window.location = "mainvids1computers.html" // redirect
  }
}
};

</script>

Answer 2

to match between video and thumbnail add videoID outside function, for your player thumbnail it should not called like <img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style=... this is not valid javascript. last onYouTubePlayerAPIReady should be on the window object.

function rotateYT() {
  var videos = ['usewkEuDVjU',
    'IL9iemWe_g8',
    'gGMi60M5O98',
    'SN3CgQvqzAo',
    'W1YFnHjjG8s',
    'l9qMYZvG7EE',
    'j_ljOjr54gc',
    'MhczSQtIgNM',
    'j_ljOjr54gc',
    'T-GPePrh7rw',
    'LTNQFYARFOk',
    'ehciyVuCyvs',
    'g4xSmh0LF6Y',
    'shM7cV-fR9o',
  ];

  var index = Math.floor(Math.random() * videos.length);
  return videos[index];
}
// get random video ID
var videoID = rotateYT();

document.getElementById('player-thumb').src = 'https://img.youtube.com/vi/'+ videoID +'/1.jpg';

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// create youtube player
var player;

window.onYouTubePlayerAPIReady = function() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    border: '0',
    version: '3',
    showinfo: '0',
    rel: '0',
    controls: '1',
    loop: '0',
    allowfullscreen: '0',
    videoId: videoID,

    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

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

// autoplay video
function onPlayerReady(event) {

}

// when video ends
function onPlayerStateChange(event) {
  if(event.data === 0) {
    window.location = "mainvids1computers.html" // redirect
  }
}

<div id="player" style="position:fixed; top:0%; left:0%; width:240px; height:180px;" allowfullscreen>

<img id="player-thumb" src="https://img.youtube.com/vi/default.jpg" style="top:100px; left:100px; width:240px; height:180px;">

</div>