YouTube/Vimeo slideshow with jQuery Cycle plugin

by Prasad Gavande

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>http://jsfiddle.net/ezrafree/hrX2j/#update
  </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>

CSS

#key .backward,
#key .forward {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  line-height: 24px;
  text-align: center;
  background-color: #333;
  bottom: 10px;
  font-size: 32px;
  left: 10px;
  color: #fff;
}

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;
  });

});