Quick link: Sencha Youtube Videos @ Github
Last month I've been working on Hello, Harto! tour mobile app. The iPhone version of the app is built with Sencha Touch 2.1 and Cordova. And I should say that these two work very good in pair. Sencha provides whole bunch of layouts and animations ready to go, while Cordova is making possible to access iPhone features like GPS, internet connection check, Social Sharing API, Facebook Connect and Push Notifications.
Youtube iframes on the iPhone
There was a problem that I had been fighting for a while and got it solved — embeded youtube videos.
Embeded youtube iframe breaks screen scrolling experience. When user touch the iframe area trying to scroll nothing happens, cause iframe intercepts touch event and sencha scrolling engine is not able to handle touch event.
It's not a big deal if there is a layout that fits phone screen and scroll not required. In our case there is huge screen with a few videos, photos, comments and no scroll is not an option.
How it works
The component is based on
Ext.Img class which provides a basis for video thumb and shows play button overlay on the top of it. When user taps on thumb, iframe is shown and video starts playing. After video ends/stops/paused iframe is resized to the 10px box and hidden under play button overlay. This part is important and tricky, I've tried to hide, delete iframe and some other options, but ended up with resizing. It allows to continue playing after pause and have a few youtube iframes on the same page with no issue. Video has to be resized only once, cause after second play tap player goes into fullscreen mode and user don't see the iframe itself.
Check out Sencha Youtube Videos @ Github project for reference and demo project.
Hope this will save you some time. If you have any questions or comments, go ahead and reach me via @alex_kravets or email. Have fun!