JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
<head> 
	<title>到高雄看黃色小鴨</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head> 

<body> 
	<div id="VideoPlayer"><!-- 這裡會嵌入YouTube Player播放影片 --></div>
	<div id="VideoThumbs"><!-- 這裡會產生YouTube Thumbs列出影片 --></div>
	<script type="text/javascript">
		function LoadVideo(videoUrl) {
			str = '<iframe width="100%" height="240" src="http://www.youtube.com/embed/' + videoUrl + '&autoplay=1" frameborder="0">';
			str += '</iframe>';
			$("#VideoPlayer").html(str);
			window.scrollTo(0,0);
		}
		function ShowVideoThumbs(data) {
		  var feed = data.feed;
		  var entries = feed.entry || [];
		  var html = ['<ul style="margin-bottom:0px;padding-left:0px;margin-left:0px;list-style:none;">'];
		  for (var i = 0; i < entries.length; i++) {
				var entry = entries[i];
				var title = entry.title.$t.substr(0,10);
				var thumblUrl = entries[i].media$group.media$thumbnail[0].url;
				var videoUrl = entries[i].media$group.media$content[0].url;
				if ( i==0 ) LoadVideo(videoUrl.substr(25)); /// 第一個嵌入YouTube Player播放影片	
				html.push('<li onclick="LoadVideo(\'', videoUrl.substr(25) , '\')" style="float:left;width:45%;margin-bottom:1em;margin-right:1em;">', '<span>', title , '...<br /><img src="', thumblUrl, '" style="width:100%;box-shadow:1px 1px 5px #666;border:solid 4px #fff;" />', '</span></li>');
			  }
			  html.push('</ul><br style="clear:left;"/>');
			  document.getElementById('VideoThumbs').innerHTML = html.join('');
		}
	</script>
	<!-- YouTube API是從下列這行開始動作, 得到影片json資料後, 就會呼叫ShowVideoThumbs函式進行處理. -->
	<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/playlists/PLZpe6ObhwpBApHl7to54WhUzj8UEv-X-S?v=2&alt=json-in-script&callback=ShowVideoThumbs&max-results=50"></script>
</body>
</html>