マウスホバーでYoutube動画のサムネイルを連続表示させる

Ads

Result

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('http://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="http://www.youtube.com/watch?v=zlfKdbWwruY"></a>
        </div>
         <div class="video">
            <a href="http://www.youtube.com/watch?v=Z2VoEN1iooE"></a>
        </div>

via

animated youtube thumbnails

タイトルとURLをコピーしました