jQuery Cycle 2 +YouTube videos on iOS

by Tammy Ritterskamp

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.swipe.min.js"></script>
    			<div class="feat-videos">
    				<div class="slide">
    					<iframe src="http://www.youtube.com/embed/zlPb8vsvcoM" frameborder="0" allowfullscreen></iframe>
    				</div>
    				<div class="slide">
    					<iframe src="http://www.youtube.com/embed/o6QubbA4E7A" frameborder="0" allowfullscreen></iframe>
    				</div>
    				<div class="slide">
    					<iframe src="http://www.youtube.com/embed/aP0V9mQTc3g" frameborder="0" allowfullscreen></iframe>
    				</div>
    				<div class="slide">
    					<iframe src="http://www.youtube.com/embed/g6BmU49XG7w" frameborder="0" allowfullscreen></iframe>
    				</div>
					<div class="cycle-prev">&lt;</div>
					<div class="cycle-next">&gt;</div>
    				<div class="pager-wrapper"><div class="cycle-pager"></div></div>
    			</div>

CSS

.feat-videos {
    margin-bottom: 40px;
    overflow: hidden;
    padding-bottom: 30px;
    position: relative;
    width:640px;
    height:360px;
}
.feat-videos iframe {
    width:640px;
    height:360px;
    position: relative;
}
.feat-videos .cycle-prev, .feat-videos .cycle-next {
    border: medium none;
    font-size: 40px;
    margin-top: -40px;
}
.feat-videos .cycle-prev, .feat-videos .cycle-next {
    background: none repeat scroll 0 0 #000;
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    line-height: 40px;
    margin-top: -32px;
    opacity: 0.5;
    padding: 0 10px;
    position: absolute;
    top: 50%;
    z-index: 1001;
}
.feat-videos .cycle-next {
    border-radius: 4px 0 0 4px;
    right: 0;
}
.feat-videos .cycle-prev {
    border-radius: 0 4px 4px 0;
    left: 0;
}
.feat-videos .pager-wrapper {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}
.feat-videos .cycle-pager {
    cursor: pointer;
    font-size:40px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    z-index: 101;
}
.cycle-pager-active {
    color:red;
}

JavaScript

$(document).ready(function () {
    // initialize cycle
    $('.feat-videos').cycle({
			fx: 'scrollHorz',
			timeout: 0,
			autoHeight: 'container',
			pager: '> .pager-wrapper .cycle-pager',
			slides: '> .slide',
			swipe: true
		});

});