Question

I'm trying to use Nivo 1.1 with jQuery 1.10.1. Works great on Desktop browsers, but is failing me on iOS 7 devices, iPad Mini and iPhone 5c. I've seen the -webkit-transition fix posted on GitHub but that fix does not work. Also, as claimed by the site, 1.1 does not seem to fix iOS issues.

I tested their demo site on both iOS devices I have and most of their lightbox links don't work either. I also get no errors when using safari developer tools to debug my iOS safari instances.

Nivo Demo Site

I'm specifically trying to get two YouTube videos working on mobile devices.

See example I've put together here:

Example Page with Nivo 1.1 Lightbox + YouTube

Thanks

Was it helpful?

Solution

On line 164 and 168 (nivo-lightbox.js) where the source url for youtube is created change:

# 164
src = 'http://www.youtube.com/v/'+ video[4];
# 168
src = 'http://www.youtube.com/v/'+ video[3];

To:

# 164
src = 'http://www.youtube.com/embed/'+ video[4] +'?autoplay=1';
# 168
src = 'http://www.youtube.com/embed/'+ video[3] +'?autoplay=1';

This works for me, tested on iOS7 Safari, iOS7 Chrome and OSX 10.9 Chrome.

I think it's because the YouTube iOS7 app wants to take control over the video but somehow can't..

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top