JSFiddle - React, Tailwind, and code Playground
by Vladimir
CSS
div {
width:200px;
outline:1px solid #000;
float: left;
margin:10px;
}
div img {
width: 100%;
}
JavaScript
$.ajax({
url: 'http://gdata.youtube.com/feeds/api/videos',
data: {
'max-results': 5,
alt: 'json',
orderby: 'published',
author: 'DepecheModeVEVO'
},
dataType: 'json',
success: function(data) {
console.log(data);
for(var i=0; i < data.feed.entry.length; i++) {
var v = data.feed.entry[i];
$('body').append('<div>' +
'<a href="' + v.link[0].href + '"><h2>' + v.title.$t + '</h2></a>' +
'<h3>' + v.author[0].name.$t + '</h3>' +
'<img src="' + v.media$group.media$thumbnail[0].url + '" />' +
'</div>');
}
}
});