JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="videos-list">
<li>
<a href="#" class="vid_thumb">
<img src="http://placehold.it/120x90&text=Loading+.+.+." class="yt_thumb" data-url="http://gdata.youtube.com/feeds/api/videos/f_JRZI9o49w?v=2&alt=jsonc" alt="" />
<span class="duration">Loading...</span></a>
<h5><a href="#"></a></h5>
</li>
<li>
<a href="#" class="vid_thumb">
<img src="http://placehold.it/120x90&text=Loading+.+.+." class="yt_thumb" data-url=
"http://gdata.youtube.com/feeds/api/videos/uHUHFthr2QA?v=2&alt=jsonc" alt="" />
<span class="duration">Loading...</span></a>
<h5><a href="#"></a></h5>
</li>
</ul>
CSS
/**
Video List Styles
**/
ul.videos-list {
list-style:none;
}
ul.videos-list li {
float:left;
margin-right:12px;
margin-bottom:16px;
width:125px;
height:152px;
overflow:hidden;
}
ul.videos-list li a img {
width:120px;
height:90px;
}
ul.videos-list li a.vid_thumb {
position:relative;
}
ul.videos-list li a.vid_thumb span.duration {
position:absolute;
bottom:6px;
right:9px;
background:#000000;
color:#ffffff;
line-height:17px;
font-size:11px;
padding:0px 6px;
border-radius:3px;
}
ul.videos-list li h5 a {
color:#cf000b;
text-decoration:none;
font-size:13px;
}
ul.videos-list li span.view_count, ul.videos-list li span.upload_date {
font-size:11px;
display:block;
}
JavaScript
$(function() {
/**
* Set up JSON parsing for video pages
*/
$("a.vid_thumb").each(function(i) {
$this = $(this);
feed_url = $this.children(".yt_thumb").attr("data-url");
$.getJSON(feed_url, function(json) {
$title = json.data.title;
$url = json.data.player.
default;
$thumb = json.data.thumbnail.sqDefault;
$duration = json.data.duration;
$likes = json.data.likeCount;
$views = json.data.viewCount;
$this.next("h5").html("<a href=" + $url + ">" + $title + "</a>");
$this.children(".duration").html($duration);
$this.children(".yt_thumb").attr("src", $thumb);
$this.next("span.view_count").html($views + " Views");
$this.next("span.upload_date").html($likes + " Likes");
});
});
});