JSFiddle - React, Tailwind, and code Playground
HTML
<div class="youTube">
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
</div>
JavaScript
/*
jYoutube reference: http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html
*/
$.extend({
jYoutube: function( url, size ){
if(url === null){ return ""; }
size = (size === null) ? "big" : size;
var vid;
var results;
results = url.match("[\\?&]v=([^&#]*)");
vid = ( results === null ) ? url : results[1];
if(size == "small"){
return "http://img.youtube.com/vi/"+vid+"/2.jpg";
}else {
return "http://img.youtube.com/vi/"+vid+"/0.jpg";
}
}
});
$(".youTube a").each(function(){
var lnk = $(this);
// Get YouTube thumb image
var url = $.jYoutube(lnk.attr("href"));
// Now append this image to <div id="thumbs">
lnk.children('img').attr("src", url);
});