search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Flickity Youtube Support #199

Open quinnktaylor opened 9 years ago

quinnktaylor commented 9 years ago

Is it possible to keep the Flickity swiping functionality with a youtube iframe embedded into one of the gallery cells ? See the example below. If you click on one of those cells and the video begins to play, you're no longer able to swipe from that cell. This is very hard to get around on mobile devices in instances where the gallery spans 100%.

http://codepen.io/zachgibson/pen/xGrqKY

desandro commented 9 years ago

Sorry, no. YouTube embeds use iframes. There is no way to capture events within iframes.

Flickity does work with HTML5 <video>. If you can host your own video, you can use videos just like you would images.

qbunt commented 9 years ago

@quinnktaylor I just had the same problem, but it's also not limited to Flickity, embedding youtube in any other carousel you'll have the same problem on mobile. We attempted to get around this by embedding the youtube poster frame in each cell and swapping it for the iframe on click. This also doesn't work, you have to click twice, once to swap, the other to start the video playing, as autoplay isn't allowed for Android or iOS.

@desandro I'm not sure this is something that can be fixed for gestures with mobile, not sure it's worth keeping open. I came across this issue here, there's no solution there either.

ghost commented 8 years ago

Hmm, I love flicktiy, but masterslider is able to do it.

Bjoelin commented 8 years ago

@omarel1 Would you happen to have a demo site for Masterslider showing 2 or more videos in one carousel? Couldn't find one.

aiphee commented 8 years ago

Would it be possible to it like it is in owl carousel? http://www.owlcarousel.owlgraphic.com/demos/video.html

qbunt commented 8 years ago

@aiphee it looks like owl carousel does the same thing with a poster frame instead of the actual iframe embed. It requires the user to tap twice on mobile always on mobile (iOS and Android). Maybe a transparent div with dispatching a click underneath would solve it but it seems very unlikely.

EarthlingDavey commented 7 years ago

Kind of an old thread but check out this solution, placing elements in front of the video iframe, leaving a space for the play button, video controls and title. https://codepen.io/daveybrown/pen/WZEqdx

desandro commented 7 years ago

@daveybrown Very cool solution! Thank you for sharing

EarthlingDavey commented 7 years ago

No worries! Awesome project btw :D

JasonTheAdams commented 6 years ago

Made a very minor tweak using calc() to better manage varying container widths: https://codepen.io/JasonTheAdams/pen/OBPPKW