YouTube Video Slider with Mobile Swipe Gestures

I had a similar problem whilst using Vimeo videos embedded via an iframe, but I wasn’t using thumbnails.

The problem was similar though; on mobile I couldn’t swipe between the videos. Even the slider setting ‘disable swipe gestures’ was not ticked.

The workaround I used involved laying a transparent div over each video, and setting a higher z index on the div:

  1. You’ll start with a parent Slide element (‘Slide 2’ in the example below) which contains a child ‘HTML embed’ element. Add an empty Div block also as a child of the Slide element. The order relative to the HTML embed element does not matter:
    Screenshot 2022-12-01 at 16.54.28

  2. Check ‘Slide 2’ Position is set to Relative.

  3. Set Div block position to Absolute. This allows the empty div to sit on top of the video.

  4. Set the div block Width and Height to 100%.

  5. Give the Div block a higher z index value than the HTML Embed element.

Now if you test it on mobile you’ll be able to swipe between videos.

This is how I figured it out for myself so there may be a better way to achieve the same behaviour!
Also I tested it by hiding the div block, and by giving the div block a lower z index value. In both cases the swipe functionality stopped working.

Hope this helps.