Youtube Thumbnail Generator

A simple little system for creating the urls to youtube thumbnail images.

by Ben Gillbanks

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<form>
    <div class="form-group">
        <label for="videoID">Youtube Video ID</label>
        <input type="text" class="form-control" id="videoID" value="kUW0L_tNCG0" />
    </div>
</form>
<div id="thumbnail_container"></div>

CSS

form {
    width:50%;
    padding:20px;
}

#thumbnail_container {
    padding:20px;
}

#thumbnail_container img {
    max-width:100%;
    height:auto;
}

.caption {
    padding:10px;
    background:#f5f5f5;
    color:#999;
    font-size:0.9em;
    margin-bottom:30px;
    border-radius:0 0 4px 4px;
}
.caption strong {
    color:#ddd;
}
.caption p {
    margin-bottom:0;
}
.image-wrapper {
    text-align:center;
    border:1px solid #f5f5f5;
    padding:10px;
    border-radius:4px 4px 0 0;
}

JavaScript

var thumbnail_list = [
    'https://i.ytimg.com/vi/[video-id]/maxresdefault.jpg',
    'https://i.ytimg.com/vi/[video-id]/0.jpg',
    'https://i.ytimg.com/vi/[video-id]/1.jpg',
    'https://i.ytimg.com/vi/[video-id]/2.jpg',
    'https://i.ytimg.com/vi/[video-id]/3.jpg',
    'https://i.ytimg.com/vi/[video-id]/default.jpg',
    'https://i.ytimg.com/vi/[video-id]/hqdefault.jpg',
    'https://i.ytimg.com/vi/[video-id]/mqdefault.jpg',
    'https://i.ytimg.com/vi/[video-id]/sddefault.jpg'
];
    
var update = function() {
    
    if ( update_html ) {
    
        var html = '';
        var video_id = $('#videoID').val();
        
        $.each(thumbnail_list, function(){
            var image_url = this.replace('[video-id]', video_id);
            html = html + '<div class="image-wrapper"><img src="' + image_url + '" /></div>';
            html = html + '<div class="caption"><p><strong>Pattern:</strong> ' + this + '</p>';
            html = html + '<p><strong>This Image:</strong> <a href="' + image_url + '">' + image_url + '</a></div>';
        });
        
        $('#thumbnail_container').html( html );
    }
    update_html = false;
    
}
    
var update_html = true;

$('.form-group').on('submit', function(e) {
    e.preventDefault();
    update_html = true;
    update();
});
    
$('#videoID').on('input', function(){
    update_html = true;
    update();
});
    
//setInterval( update, 1000 );

update();