Video - Prev / Next

HTML

<script src="http://www.patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jquery.cycle.all.min.js"></script>
<ul id="wolf-tv">
    <li><iframe title="YouTube video player" width="300" height="170" src="http://www.youtube.com/embed/vr3x_RRJdd4?rel=0&autoplay=0&autohide=1&controls=0" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe title="YouTube video player" width="300" height="170" src="http://www.youtube.com/embed/3hBJIbSScBM?rel=0&autoplay=0&autohide=1&controls=0" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe title="YouTube video player" width="300" height="170" src="http://www.youtube.com/embed/d1_JBMrrYw8?rel=0&autoplay=0&autohide=1&controls=0" frameborder="0" allowfullscreen></iframe></li>
</ul>
<span class='wolf-prev'>prev </span>
<span class='wolf-next'>next </span>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>

CSS

#wolf-tv{position:relative;}
#wolf-tv li {position:absolute; top:0; left:0}
.wolf-prev {position: absolute;top: 200px;}
.wolf-next {position: absolute;top: 200px;left: 100px;}

JavaScript

$('#wolf-tv').cycle({
    fx: 'none',
    prev: '.wolf-prev',
    next: '.wolf-next',
    speed:  'fast', 
    timeout: 0
});