YouTube/Vimeo slideshow with jQuery Cycle plugin

by B L Praveen

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<ul id="container">
	<li>
		<iframe src="http://player.vimeo.com/video/58822081" alt="http://player.vimeo.com/video/58822081?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	</li>
	<li>
		<iframe src="http://player.vimeo.com/video/58277131" alt="http://player.vimeo.com/video/58277131?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	</li>
	<li>
		<iframe src="http://www.youtube.com/embed/SmSlnsi21Uk" alt="http://www.youtube.com/embed/SmSlnsi21Uk?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
	</li>
	<li>
		<iframe src="http://www.youtube.com/embed/8nTFjVm9sTQ" alt="http://www.youtube.com/embed/8nTFjVm9sTQ?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
	</li>
</ul>
<div id="slidenav" style="text-align:center;margin:auto;width:300px;">
	<a href="javascript:return false;" id="prev">« Prev</a>
	<a href="javascript:return false;" id="next">Next »</a>
</div>

JavaScript

$(document).ready(function() {

	var firstSource = $('#container iframe:first').attr('alt');
	$('#container iframe:first').attr('src', firstSource);

	$('#container').cycle({
		/* cycle options */
		fx:      'scrollHorz',
		prev:    '#prev',
		next:    '#next',
		timeout:  0,
		after: function() {
			$('#container iframe').attr('src', '');
			var theSource = $(this).find('iframe').attr('alt');
			console.log('theSource:before', theSource);
			$(this).find('iframe').attr('src', theSource);
		}
	});

	$('#slidenav a').on("click", function(e){ return false; });

});