Youtube video on Sencha changes the layout of the app explicitly when fixing the orientation to portrait in ios

Question

Phonegap and Sencha touch 2.3.0

I am playing the youtube video in iframe and app's orientation is fixed to portait by phonegap. Though the video can be played in landscape mode too when it is full screen. But after playing the video in landscape mode the app looks weird, you can see a blank white screen at the bottom and the app is now horizontal scrollable.

Here you can see the problem: https://www.youtube.com/watch?v=JkYei-oIzlQ&list=UUzxX9Q9O-a-uNQSIbcjuCpQ

Answer 1

I have also faced this same problem.I don't know what was causing this problem but as a workaround I set the height and width of the viewport forcefully on orientation change, like this:-

In controls catch the orientation change event:

viewport: {
   //capture the orientation change event
   orientationchange: 'onOrientationchange'
 }

Set the viewport width and height:

onOrientationchange: function(viewport, orientation) {
           setTimeout(function() {
                Ext.Viewport.setHeight(window.innerHeight); // -20 for the statusbar overlapping problem in ios 7
                Ext.Viewport.setWidth(window.innerWidth);
        }, 250);
}