I have a Youtube video slider using the jQuery Cycle2 plugin. My previous/next arrows are positioned to overlay the videos. And I'm using the jQuery Cycle2 swipe plugin to enable swipe events on touchscreen devices.
jsfiddle example: http://jsfiddle.net/tritterskamp/22cBg/17/
I'm running into two issues on iOS devices.
- The swipe gesture does not seem to work.
- Once a video has started playing, the arrows no longer work.
similar to the arrow issue: Overlay image over a you-tube video is not clickable on I-pod/ I-phone devices
Is the Cycle swipe functionality simply not compatible with Youtube videos?
Any insight would be helpful!
Thanks.
HTML:
<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">
<
</div>
<div class="cycle-next">
>
</div>
<div class="pager-wrapper">
<div class="cycle-pager"></div>
</div>
</div>
JS:
$(document).ready(function () {
// initialize cycle
$('.feat-videos').cycle({
fx: 'scrollHorz',
timeout: 0,
autoHeight: 'container',
pager: '> .pager-wrapper .cycle-pager',
slides: '> .slide',
swipe: true
});
});