JSFiddle - React, Tailwind, and code Playground

HTML

<div id="youtubesmall"></div>
<div class="youtubesmallNav" id="youtubesmallNav"> <a class="YSNLeft" id="YSNLeft" href="#">left</a> <a class="YSNRight" id="YSNRight" href="#">right</a> </div>

CSS

#youtubesmall {
    position: relative;
    width: 100%;
    height: 240px;
    display: block;
    overflow: hidden;
    margin: 15px;
}
#youtubesmall ul {
    position:absolute;
    width:100%;
    margin:0px;
}

#youtubesmall ul li{
    width:100%;
    height:60px;
    padding:0px;
}

#youtubesmall ul li .inner{
    padding:10px 0px;
    height:39px;
    border-bottom: 1px inset #D0D2D3;
}

#youtubesmall ul li .inner img {
    float:left;
    margin-right:10px;    
}

#youtubesmall ul li .inner h3 {
    float:left;    
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    width:80%;
}

#youtubesmall ul li .inner p {
    float:left;
    font-size:12px;    
}

#youtubesmall ul li .inner a {
    float:left;    
}

#youtubesmallNav {
    position: absolute;
    right: 58px;
    bottom: 10px;
}

JavaScript

var youtubeUrlSmall = 'http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=test&max-results=12&orderby=published&time=today&callback=?';

$.getJSON(youtubeUrlSmall, function(json) {

    var items = [];
    var len;

    var html = "";
    $.each(json.data.items, function(i, youtube) {

        var title = youtube.title.substr(0, 20);
        var content = youtube.description.substr(0, 80);
        var player = youtube.id;

        html += '<li><div class="inner"><img src="' + youtube.thumbnail.sqDefault + '" width="80" height="40" alt="you tube vid" /><h3><a target="_blank" href="http://www.youtube.com/watch?v=' + player + '">' + title + '</a></h3><p>' + (content) + '</p></div></li>';

        var len = i;
        items.push(len);

    });
    html += "";
    var sch = items.length * 60;


    $('#youtubesmall').html(html).fadeIn(2000);
    $('#youtubesmall li').wrapAll("<ul style='height:" + sch + "px;' />");


    $("a#YSNLeft").click(function() {

        if ($("#youtubesmall ul:animated").length === 0) {

            var position = $("#youtubesmall ul").position();
            var total = sch / 4;
            var scrollTop = position.top - total;
            var overall = sch - total;
            if (position.top != '-' + overall) {
                $("#youtubesmall ul").stop().animate({
                    'top': scrollTop + 'px'
                }, 'slow');
            } else {

            }
        }
        return false;
    });

    $("a#YSNRight").click(function() {

        if ($("#youtubesmall ul:animated").length === 0) {

            var position = $("#youtubesmall ul").position();
            var total = sch / 4;
            var scrollTop = position.top + total;
            if (position.top != '0') {
                $("#youtubesmall ul").stop().animate({
                    'top': scrollTop + 'px'
                }, 'slow');
            } else {

            }
        }
        return false;
    });



});