JSFiddle - React, Tailwind, and code Playground

by Erwin Hilario

HTML

<div style="width: 900px; height: 500px; background-color: grey; margin: 0px auto;overflow: hidden; position: relative;">
<!-- video and contents -->
	<div class="banner" style="width:900px; height: 400px; background-color: #000066; margin: 0px auto; vertical-align: middle; position: absolute; left: 0px; top: 0px; ">
		<div id="popupVid" style="margin: 0px auto; padding-top: 50px; width:500px; height: 315px; z-index:200; ">
		   <iframe width="500" height="315" src="http://www.youtube.com/embed/ueumqNwfIeQ?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe>
		   <br /><br />
		   <a href="javascript:;" onClick="toggleVideo('hide');">STOP</a>
		</div>
	</div>
	<div class="banner" style="width:900px; height: 400px; background-color: #006600; margin: 0px auto; vertical-align: middle; position: absolute; left: 900px; top: 0px; ">	
	</div>
	<div class="banner" style="width:900px; height: 400px; background-color: #660000; margin: 0px auto; vertical-align: middle; position: absolute; left: 1800px; top: 0px; ">	
	</div>

	<a href="javascript:void(0);"><div class="leftNav" style="background-color: #333; width: 30px; height: 500px; position: absolute; top: 0px; left: 0px;"></div></a>
	<a href="javascript:void(0);"><div class="rightNav" style="background-color: #333; width: 30px; height: 500px; position: absolute; top: 0px; right: 0px;"></div></a>
	
</div>

JavaScript

function toggleVideo(state) {
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}

$(document).ready(function(){
	$('.leftNav').click(function(){
		$('.banner').animate({left:"-=900px"});	
	});
	$('.rightNav').click(function(){
		$('.banner').animate({left:"+=900px"});	
	});
});