Easier way to switch to the next or previous part

[e2jk]

The shortcuts n and p work fine when you have a keyboard, but are not usable on mobile devices. Would it be possible to use swipe movements to pass to the next or previous tutorial parts?

[e2jk]

Struggling because of the YouTube iframe, maybe only support for local player? Interesting bits found here: https://css-tricks.com/simple-swipe-with-vanilla-javascript/

let x0 = null;

function unify(e) {
  "use strict";
  return e.changedTouches ? e.changedTouches[0] : e;
};

function lock(e) {
  "use strict";
  x0 = unify(e).clientX;
};

function move(e) {
  "use strict";
  if(x0 || x0 === 0) {
    let dx = unify(e).clientX - x0, s = Math.sign(dx);

    console.log("s:" + s + " dx:" + dx + " absdx:" + dx*s);
    if (dx*s > 50) {
      // Lateral move must be at least 50px to qualify as right or left swipe
      if(s > 0){
        console.log("swipe right");
      } else {
        console.log("swipe left");
      }
    } else {
      console.log("movement doesn't qualify as right or left swipe");
    }
    x0 = null;
  }
};

$("#tutorial_page").on('mousedown', lock);
$("#tutorial_page").on('touchstart', lock);
// $("#tutorial_page").on('touchmove', e => { e.preventDefault() });
$("#tutorial_page").on('mouseup', move);
$("#tutorial_page").on('touchend', move);

I also played with the idea of using CSS pointer-events: none; to block the video of getting the click events, using an invisible div in front that would relay play/pause events, but that seems not necessarily as a good idea ;)