How to fix Sencha scrolling issue when a few embedded videos on a screen?
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.