YouTube Video Slider with Mobile Swipe Gestures

Design help Custom code
1

Has anybody created a YouTube video slider in Webflow before that allows for thumbnails and still allows swipe gestures on mobile?

I don’t believe it’s possible with the native slider component, everything worked, but swiping didn’t work on mobile (tried with video component, and iframe embed)

I am now attempting to use the Splide video plugin - which works perfectly, although YouTube videos specifically do not have any parameters that allow for height/width to be specified. I’ve tried to manually resize the iframes with JS, but they appear to be being skipped by the document-ready listener, so I can’t grab them. (the alert returns zero, but I can grab them manually in the console using documents.getElementsByTagName)

document.addEventListener('DOMContentLoaded', () => {
  var iframe = document.getElementsByTagName("iframe");
  alert(iframe.length);

  for(let i = 0;i < iframe.length; i++)
      {
          iframe[i].height = "339.7";
          iframe[i].width = "603.91";
      }
  });

Any tips/workarounds/advice/solutions would be greatly appreciated

Here is my site Read-Only: [LINK][1]

2

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.