Swipe-scrolling list of YouTube videos

I have a list of YouTube videos. It appears that I cannot swipe-scroll this list when I swipe the screen on a YouTube iFrame. I assume that the swipe events are not bubbled from the iFrame. Any way to get around this problem?


1 Like

Any pointers please?

Can you please provide a codepen

Sure. Please see here - Youtube List

@mhartington any pointers? Am I doing this the wrong way?

The issue seems to be that the iframes are catching the touch events.

A quick solution would be to use an youtube-embed directive and set up a poster image.
This way the image would show first, then when you tap on the image, it would load up the youtube iframe.

This could be a good place to start if your are up for some hacking

@akshaycs, did you get arround this issue?

1 Like

Tried doing it that way but it doesn’t really solve the problem.

It works fine when you dont play any of the videos but once you click the image and it gets replaced by the video iframe the problem returns as you cannot scroll over the video iframe which was the original problem.

Hmm, well since the eventual goal is to get rid of js-scrolling, try switching to overflow scrolling

Nope :frowning: I couldn’t get this to work

Read up and down the internet trying to find a solution to this, it seems its a big problem for many people, the problem lies with the iframe itself catching the swiping & clcik events so the scroller never receives them. I’ve tried using pointer-events: none css attribute, this allowed me to scroll but then I could not click on the video to start it.

As a temporary solution I have added an empty div on top of the iframe that catches the swiping events, when you want to start the video you have to double-tap it. The first tap removes the extra div and the second clicks on the actual video. The div is then re-applied after one second. Obviously, this solution will not work for videos that have more controls than just start/stop.

Ultimately to solve this we need a way to allow swiping events to go through to the scroller but still catch the click events in the iframe.