JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    </head>
    
    <body>
        <div id="videoContainer">
            <div id="playerContainer">
                <div class="playerw">
                    <div id="player"></div>
                </div>
                <div id="videos"></div>
            </div>
        </div>
    </body>

</html>

CSS

object {
    padding: 2px;
}
#player {
    border: solid 1px #5A7EAB;
}
#videoContainer {
    font-size:13px;
    overflow:hidden;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:650px;
    width:728px;
}
#videos {
    position:relative;
    left:0px;
    top:0px;
}
.playerw {
    position:relative;
    height:355px;
}
ul.videos {
    list-style:none;
    margin-top:0px;
    margin-left:0;
    padding-left:0;
}
ul.videos li {
    position:relative;
    cursor:pointer;
    display:inline;
    padding-right:22px;
}
ul.videos li span {
    position:absolute;
    top:14px;
    left:2px;
    width:118px;
    font-family: Verdana;
    font-size: 11px;
    font-weight:normal;
    line-height:15px;
}
ul.videos li span:hover {
    color:#4A6A81;
}
#videoContainer img {
    position:relative;
    margin-top:0px;
    padding: 3px;
    border:solid 1px #CCC;
}
#videoContainer img:hover {
    -moz-box-shadow:3px 3px 3px #848484;
    -webkit-box-shadow:3px 3px 3px #848484;
    box-shadow:3px 3px 3px #848484;
}

JavaScript

function loadVideo(playerUrl, autoplay) {
    swfobject.embedSWF(
    playerUrl + '&rel=1&border=0&autohide=1&fs=1&autoplay=' + (autoplay ? 1 : 0) + '&version=3', 'player', '722', '299', '9.0.0', false, false, {
        allowfullscreen: 'true'
    });


}



function showMyVideos(data) {
    var feed = data.feed;
    var entries = feed.entry || [];
    var html = ['<ul class="videos">'];
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];

        var title = entry.title.$t.substr(0, 40);

        var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
        var playerUrl = entries[i].media$group.media$content[0].url;
        var videoId = playerUrl.substr(playerUrl.indexOf('v/') + 2, 11);
        playerUrl = "http://www.youtube.com/v/" + videoId;
        html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">', '<img src="', thumbnailUrl, '" width="116" height="76"/> <span> ', title, '</span></li>');

    }
    html.push('</ul>');
    document.getElementById('videos').innerHTML = html.join('');
    if (entries.length > 0) {
        loadVideo(entries[0].media$group.media$content[0].url, false);
    }
}

$(function () {
    $.ajax({
        type: "GET",
        url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?time=all_time&alt=json-in-script&max-results=5&format=5",
        cache: false,
        dataType: 'jsonp',
        success: function (data) {
            showMyVideos(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown, data) {
            alert("Not able to fetch the data due to feed unavailability!!!");
        }
    });
})