JSFiddle - React, Tailwind, and code Playground

by Johntaa

HTML

<ul id="scroll">
    <li><img src="http://img.youtube.com/vi/DIEDkY2Y49s/1.jpg"/></li>
</ul>

CSS

#scroll { overflow: hidden; }

#scroll > li { height: 60px; }

#scroll > li >img{width:80px;height:50px;}#scroll { overflow: hidden; }

JavaScript

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/7C24875F5109557C?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 + "/1.jpg";
        list_data += '<li rel=' + videoID + '><img alt="' + feedTitle + '" src="' + thumb + '"/></li>';
    });
    $(list_data).appendTo("#scroll");
});





var scroll = function() {
    var first = $("#scroll > li:eq(0)");
    var last = first.clone().appendTo("#scroll");

    $("#scroll").animate({
        "scrollTop": first.outerHeight()
    }, 500, function() {
        first.remove();
    });

    window.setTimeout(scroll, 1000);
};

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

scroll();