Several youtube videos

by Vladimir

HTML

<div id="v-w">
<div id="v">
</div>
</div>
<div style="clear:both"></div>
<iframe id="ytplayer" type="text/html" width="480" height="320"
src="http://www.youtube.com/embed/TsOUE9hkFTs?autohide=1"
frameborder="0" allowfullscreen />

CSS

#v-w {
    width: 100%;
    overflow-x: scroll;
    height:120px;
}
#v {
    width: 1600px;
    height: 120px;
    overflow: hidden;
}
.item {
    float:left;
    width:150px;
    margin:0 3px 5px;
}
.item img {
    width:100%;
    display:block;
    cursor: pointer;
}

JavaScript

var videos = ['TYkkWeOzlbM', '2oqsPt_3dNE', 'uQ2tVvrdtL8', 'T0NVGfMUV3s','EpfaxlBwhZQ', 'LjQsbFCtWo0', 'EYboww1RsJY', 'W-XnHDIvobo', '9bFElIZLlgc', '_95h5tD-aco'];
var thumb = {w:150, h:100};
var j = 0;
$(document).ready(function() {
	var html = "";
	for(var i = 0; i < videos.length; i +=1) {
		html += '<div class="item" data-id="' + videos[i] + '">' +
			'<img src="//i2.ytimg.com/vi/' + videos[i] + '/default.jpg" />' +
		'</div>';
	}
	$('#v').html(html);
    
    //*
    $('.item img').click(function() {
        var $item = $(this).parent('.item'),
            id = $item.attr('data-id'),
            src = "http://www.youtube.com/embed/" + id + "?autoplay=1&autohide=1";
        $('#ytplayer').attr('src', src);
        $item.html('<iframe id="ytplayer' + j + '" type="text/html" width="' + thumb.w + '" height="' + thumb.h + '" src="' + src + '" frameborder="0" allowfullscreen />');
    });
});