Quick Video Player

video.html

<div id="videoBoxList">
	<ul>
		<li><a href="javascript:showFeature('videoBox1','qFKHjfVz1IQ');" id="videoBox1"><span class="videoBoxNumber">Video No. 1</span><br />O'Neill Girls 2012</a></li>
		<li><a href="javascript:showFeature('videoBox2','TeqdCYYvLAk');" id="videoBox2"><span class="videoBoxNumber">Video No. 2</span><br />O'Neill Kings of Freak</a></li>
		<li><a href="javascript:showFeature('videoBox3','QvGZxMH9e2c');" id="videoBox3"><span class="videoBoxNumber">Video No. 3</span><br />Sofia Z Shoes</a></li>
		<li><a href="javascript:showFeature('videoBox4','_MCcy3_sWcI');" id="videoBox4"><span class="videoBoxNumber">Video No. 4</span><br />O'Neill Womens Fall/Holiday 2014</a></li>
		<li><a href="javascript:showFeature('videoBox5','7PiNTX9adZk');" id="videoBox5"><span class="videoBoxNumber">Video No. 5</span><br />Rob Rojas - A Paddlers Perspective</a></li>
		<li><a href="javascript:showFeature('videoBox6','auM_-QglpnE');" id="videoBox6"><span class="videoBoxNumber">Video No. 6</span><br />O'Neill "End of the Reel" Intro</a></li>
	</ul>
</div>

<div id="videoBoxGallery">
	<div id="videoBox" class="videoBoxSelection"><iframe width="750" height="422" src="//www.youtube.com/embed/qFKHjfVz1IQ?wmode=transparent&rel=0&theme=dark&color=white&autoplay=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>

video.js

$(".videoBoxSelection").hide();
currentFeature = 'videoBox1';

function showFeature(whichFeature,whichVideo) {
	var pound = '#';
	fadedLink = pound.concat(whichFeature);
	pwndLink = pound.concat(currentFeature);
	
	$('#videoBox').fadeOut(500, function() {
		var htm = '<iframe width="750" height="422" src="//www.youtube.com/embed/' + whichVideo + '?wmode=transparent&rel=0&theme=dark&color=white&autoplay=0&showinfo=0" frameborder="0" allowfullscreen></iframe>'
		$('#videoBox').html(htm);
		$('#videoBox').fadeIn(1000);
		$(pwndLink).removeClass("active");
		$(fadedLink).addClass("active");
	});
	
	currentFeature = whichFeature;
	currentLink = fadedLink;
}

(function($){
	$(document).ready(function() {
		$("#videoBox").fadeIn(2000);
		$("#videoBox1").addClass("active");
	});
})(jQuery);