Youtube playlist embedding with randomize

Question

For a small video contest (most likes on facebook) i am trying to embed a youtube playlist inside of my homepage. Each video has a like button underneath.

Now what i am trying to achieve is, that with every reload of the page the order of the videos should change, so that the chances are equal.

So far, this is my code (no php allowed because of the ckeditor)

<script type="text/javascript">
google.setOnLoadCallback(function () {
// setup the click handler
function loadVideo(video) {

$('#videos h3').text(video.title);

$('#youtubeVideo').html([
  '<iframe style="max-width:100%;" width="839" height="472" title="', video.title, '" src="', video.href, '" frameborder="0" allowfullscreen="true"></iframe>'
].join(""));
return false;
}

// get the feed info
// setting max-results delivers you the maximum of 50, you can remove to default to 25. Use feed.setNumEntries to strip down to a range between 50 and 25.
var feedUrl = "http://gdata.youtube.com/feeds/api/playlists/5602ED8DD2643FC2?max-results=50";
new google.feeds.lookupFeed(feedUrl, function (result) {
if (result.error || !result.url) {
$('#videocomm').hide();
return;
}
// get the feed items
var feed = new google.feeds.Feed(result.url);
feed.setNumEntries(50);
feed.load(function (result) {
// write out the feed data
var container = $(".youtubeFeed");
//var totalcount = result.feed.entries.length;
//alert (totalcount);

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var vidhash = /=(.*)&(.*)$/.exec (entry.link)[1];
// uncomment this and comment out the item below if you find rendering of the player a bit slow
// container.append('<li><div><a href="http://www.youtube.com/v/'+vidhash+'&feature=youtube_gdata&rel=1" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /><br />'+entry.title+'</a></div></li>\n');

// comment the item below and uncomment the item above if you find the player swap too slow
  container.append('<li class="vid-list-item"><span class="yt-title">'+entry.title+'</span><a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /></a><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.youtube.com/watch?v='+vidhash+'=&amp;send=false&amp;layout=button_count&amp;width=200&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=469231673121827" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe></li>\n');
}
// load the first video
$(".yt-vid-link:first").each(function () {
loadVideo(this);
return false;
});
// setup the click handler for all the videso
$(".yt-vid-link").click(function () {
loadVideo(this);
return false;
});
});
});
});
google.load("feeds", "1");
</script>

<div id="videos">
<div id="videocomm">
<h3>Warte kurz, wir laden die Videos....</h3>

<div id="youtubeVideo">&nbsp;</div>

<div class="slider">
<div id="fragment-1">
<ul class="youtubeFeed">
</ul>
</div>
</div>
</div>
</div>

UPDATE: This is what i came up with

function zufall() {
 return (Math.random() - Math.random());
}
result.feed.entries.sort(zufall); 

Answer 1

As far as I can see, you can randomize result.feed.entries to get the desired result.

You can use a function like this for it:

function fisherYates ( myArray ) {
  var i = myArray.length, j, tempi, tempj;
  if ( i === 0 ) return false;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     tempi = myArray[i];
     tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

See this StackOverflow answer.