Sencha and YouTube videos on the iPhone

How to fix Sencha scrolling issue when a few embedded videos on a screen?

How to fix Sencha scrolling issue when a few embedded videos on a screen?

During the past month, we've been building the Hello, Harto! tour mobile app with Sencha Touch 2.1 and Cordova. I should say these two work very well in pair. Sencha provides a whole bunch of layouts and animations ready to go, while Cordova makes it possible to access device features like GPS, internet connection check, Social Sharing API, Facebook Connect and Push Notifications via JavaScript.

One of the core features of the Harto app is having all of the tour youtube videos in one place. That causes problems because youtube iFrames completely break scrolling experience. Whenever iframe is touched it intercepts the event from Sencha and handles it by itself; Sencha never knows that touch happened. Having a few videos on one screen makes it very tricky to scroll because all youtube iFrames should be untouched.

After parsing Stack Overflow and first pages from Google and trying to find some sort of a fix or ready-to-go component, I've ended up building a wrapper component for Youtube videos from scratch.

It uses YouTube Player API, and with a bunch of hacks, it does a pretty good job on the iPhone.

App.component.Youtube is based on standard Ext.Img class and provides a way to show video thumb with a play button overlay on the top. It has no scrolling issues like an iFrame (mentioned above). One thumbnail tap and the video loads and begins to play. When the video ends or is stopped/paused, Youtube iframe is resized to a 10px box and is hidden under the play button overlay. This allows you to continue playing a paused video even if you have a few videos on the same screen.

Please check out the code for more details. I've included a simple demo project to show how it works. Comments are welcome on Github projects page.