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;position:relative}

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

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)");
    

    $("#scroll li").animate({
        "top": "-=60px"
    }, 500, function() {
        //first.remove();
    });

    
};

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

window.setInterval(scroll, 1500);