Result
http://jsfiddle.net/kachibito/qDNLG/23/embedded/result,js,css,html
jQuery
var timer = false; function resetImg(name, id) { $(name).attr('src', 'http://img.youtube.com/vi/' + id + '/1.jpg'); $(name).css('border', '1px solid #fff'); if (timer) { clearTimeout(timer); } } function nextImg(name, id, nr) { var myId = $(name).attr('id'); $(name).attr('src', 'http://img.youtube.com/vi/' + id + '/' + nr + '.jpg'); $(name).css('border', '1px solid #333'); nr++; if (nr > 3) { nr = 1; } timer = setTimeout("nextImg('#" + myId + "', '" + id + "', " + nr + ");", 750); } $(document).ready(function() { $("div.video a").each(function() { var ytId = $(this).attr('href').replace('https://www.youtube.com/watch?v=', '').replace('http://youtube.com/watch?v=', ''); var img = $(this).append('<img src="http://img.youtube.com/vi/' + ytId + '/1.jpg?rand=' + Math.floor(Math.random() * 11) + '" rel="' + ytId + '" id="' + ytId + '-' + Math.floor(Math.random() * 11) + '" />'); }); $("div.video a img").hover(function() { nextImg('#' + $(this).attr('id'), $(this).attr('rel'), 1); }, function() { resetImg('#' + $(this).attr('id'), $(this).attr('rel')); }); });
css
.video a img { border: 1px solid #fff; width: 150px; height: 100px; }
html
<div class="video"> <a href="https://www.youtube.com/watch?v=zlfKdbWwruY"></a> </div> <div class="video"> <a href="https://www.youtube.com/watch?v=Z2VoEN1iooE"></a> </div>