1

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.

  1. The swipe gesture does not seem to work.
  2. 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">
        &lt;
    </div>

    <div class="cycle-next">
        &gt;
    </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
    });
});
Community
  • 1
  • 1

0 Answers0