YouTube Videos in Carousel Not Working on iPad

[localjo]

I have a carousel on this page that contains several slides with YouTube videos. I've added a function on slide to stop the video playback, and everything is working fine in all browsers that I've tested except Mobile Safari on the iPad. When I go to one of the slides with a YouTube video, and tap on the video, it doesn't play. I've found that if I tap the video a few times really quickly, the video will play. Not sure what's going on here, but I suspect some of the event handlers for the carousel are blocking the YouTube video from being tapped.

[localjo]

To make debugging this issue a little harder, tapping once in Adobe Shadow plays the video fine. Perhaps this is a side effect of Mobile Safari attempting to block videos from playing automatically without user action?

[mchiocca]

Does the carousel use Flash to play the YouTube videos? Flash isn't supported on iOS devices, is that right? I'm using something called Shadowbox, which uses a Flash player to play YouTube videos. Those videos don't play when I view my web page using Safari on my iPhone. I'm not using a carousel. Shadowbox (www.shadowbox-js.com) should open the videos and play them, but nothing happens. Is Flash something that works in iOS Safari?

[localjo]

Nope, it's not using Flash. It's using the standard YouTube embed code. The video player appears fine. And it will play, it just has to be double tapped (very quickly), which is not intuitive, so from a user experience perspective, it simply "doesn't work" on an iPad. You can see my dev page which I have linked to above.

[mchiocca]

Ok. I see. I did use the YouTube embed code previously for displaying videos (before I started using Shadowbox), but I did not use them with a carousel. I laid the videos out using a

, which worked Ok. I only had to tap the videos in the table cells once to play them when I used Safari on my iPhone. The videos played fine. No double-tap was required. So it must be something with the carousel.

[localjo]

More information; I tried switching the YouTube embed code to the old version with the <object> tag, and the video plays with only one click, but the object element animates poorly when the carousel slides. I'd assume that is just a limitation of object tags, and really it should only matter that the new embed code works.

Anyone have any idea what is blocking a single tap from playing the video initially?

[fat]

Hey @josiahsprague,

Thanks for opening this issue! Unfotunately, it looks like it fails to pass the tests neccessary for submitting to bootstrap. The following tests are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!