How to apply swipe in AnythingSlider

Question

I'm using the swipe support mentioned in the official documentation but it's not working on embedded youtube videos.

Answer 1

The problem is YouTube videos are actually iframes with HTML5 and embedded video inside. So, swiping across the video doesn't register with the content outside of the iframe. The easiest solution would be to place an overlay over the video and have it cover just the video. The problem with this is that you can't tap on the video itself to make it play, you have to use the controls.

In this updated demo, the overlay covers the video and leaves the controls visible (add a background: #f00; to the swipe overlay css to see it). The controls are 40 pixels tall so you'll see the height of the overlay takes this into account.

Here is the css (the slider is 300 x 200 in size for this demo):

.swipe-overlay {
    position: absolute;
    width: 300px;
    height: 160px;
    top: 0;
    left: 0;
}

and this is the updated initialization code:

$('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {

        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x = 0, t = 0, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            mv = (touch) ? 'touchmove' : 'mousemove',
            en = (touch) ? 'touchend' : 'mouseup';

        $('<div class="swipe-overlay"></div>')
            .appendTo(slider.$window)
            .bind(st, function(e){
                // prevent image drag (Firefox)
                e.preventDefault();
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
            })
            .bind(en, function(e){
                t = 0; x = 0;
            })
            .bind(mv, function(e){
                e.preventDefault();
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                // allow if movement < 1 sec
                ct = (new Date()).getTime();
                if (t !== 0 && ct - t < time && r > range) {
                    if (newx < x) { slider.goForward(); }
                    if (newx > x) { slider.goBack(); }
                    t = 0; x = 0;
                }
            });
    }

});