JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video">
	<div class="video_main">
		&nbsp;</div>
	<div class="video_menu">
		<ul>
		</ul>
	</div>
</div>

CSS

.video{ width:620px; height:454px; position:relative; }
.video .video_menu{ width:450px;background-color:#eeeeee;color:#3c3c3c;top:0px; height: 80px; padding-left: 2px; overflow:scroll; }
.video .video_menu ul {padding-left:10px;padding-top:0px}
.video .video_menu ul li{cursor: pointer;list-style:none;padding-top:5px}

JavaScript

$(function(){
	var pics = 4;
	$.getJSON("http://v.polyv.net/uc/services/rest?jsonp=?", {method:"getPlayListById", readtoken:"1uj9yCBCGG-1fJw8Em9ee-UeC1wwmfE1", id:"1366081986209"}, function(json){
		var container = $(".video");
		var video_list = json.data[0].videolist;
		for (var i in video_list) {
			var v = video_list[i];
			var li = $("<li>");

			li.append(v.title);
			li.attr("vid", v.vid);
			li.bind("click", function(){
				var li = $(this);
				
				if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
					var html5 = '<video id="cimcvideo" width="450" height="334" src="http://v.polyv.net/uc/video/getMp4?vid='+li.attr("vid")+'"  preload controls></video>';
					$(".video_main", container).children().remove();
					$(".video_main", container).append(html5);
				}else{
					var swf = "http://player.polyv.net/videos/"+li.attr("vid")+".swf";
					var embed = $('<embed width="450" height="334" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="true" name="polyvplayer"></embed>');
					embed.attr("src", swf);
					$(".video_main", container).children().remove();
					$(".video_main", container).append(embed);
				}


			});
			$(".video_menu ul", container).append(li);
		}
		$(".video_menu ul li:first", container).click();
		
	});
});