JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="cont">
</ul>

CSS

.cont { overflow: hidden; }

.cont > li { height: 95px; }

JavaScript

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
    var list_data="";
    $.each(data.feed.entry, function(i, item) {
        var feedTitle = item.title.$t;
        var feedURL = item.link[1].href;
        var fragments = feedURL.split("/");
        var videoID = fragments[fragments.length - 2];
        var url = videoURL + videoID;
        var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
        list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"</a></li>';
    });
    $(list_data).appendTo(".cont");
});


var scroll = function(){
    var first  = $(".cont > li:eq(0)");
    var last = first.clone().appendTo(".cont");
    
    $(".cont").animate({ "scrollTop": first.outerHeight()  }, 500, function(){
        first.remove();
    });
    
    window.setTimeout(scroll, 1000);
};

$(".cont").css({ height: $(".cont").outerHeight() });

scroll();