JSFiddle - React, Tailwind, and code Playground

by Vuthy Sok

HTML

<video id="videoarea" controls="controls" poster="http://html5videoformatconverter.com/data/images/screen.jpg" src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>

<ul id="playlist">
    <li data-url="http://html5videoformatconverter.com/data/images/happyfit2.mp4" data-poster="http://html5videoformatconverter.com/data/images/screen.jpg">Happy Fit</li>
    <li data-url="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>          
    <li data-url="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>      
    <li data-url="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
</ul>

CSS

#playlist {
		margin:0;
		padding:0;
		list-style:none;
		float:left;
	}
	#playlist li {
		cursor:pointer;
		background:#ffffff;
		border-bottom: 1px solid #C9C9C9;
		padding: 13px 8px;
	}
	#playlist li:nth-child(odd) {
		background-color: #F8F8F8;
	}

	#playlist li:hover{
		color:blue;                        
	}
	#videoarea {
		
		float:left;
		width:640px;
		height:480px;
		margin:10px;    
		border:1px solid silver;
	}

JavaScript

$(function() {
		$("#playlist li").on("click", function() {
			$("#videoarea").attr({
				"src": $(this).attr("data-url"),
				"poster": "",
				"autoplay": "autoplay"
			})
		})
	   
	})