Video object doesn't scroll inside Panel

[Guaito]

Hy y'all, i've placed a video (HTML5 video tag) as one of many html elements passed to a Ext.Panel contentEl param.
This is the code:


onReady: function() {
var focusContent = new Ext.Panel ({
floating: true,
centered: true,
draggable: false,
modal: false,
width: 400,
height: 500,
scroll: 'vertical',
contentEl: 'content',
bodyMargin: false,
bodyBorder: false,
hideOnMaskTap: false
});
focusContent.show();

and the 'content' html code is:


<div id="content">
<div id="header">
<div class="logo"><img src="img/logo.png"></div>
</div>
<div id="container_video">
<!-- video player -->
<video id="framvid" src="video/test.mp4" controls="true" type="video/mp4" poster="img/test_video.jpg"></video>
</div>

<div class="other_content">
<p>Lorem ipsum...</p>
</div>
</div>

The problem (bug?) is that the video doesn't scroll along with the other stuff but it's 'blocked' at its starting position.
It works on Safari 4/5 and Chrome on PC/Mac, but not on iPad/iPhone with Safari Mobile, any solution?
Thanks in advance

[jay@moduscreate.com]

just curious --- do you want video to scroll? doesn't sound like a good user experience to me.

[Guaito]

As seen in the PopSci app, content (with video or other interactivities) on its own layer, and (controlled) background on another layer (view).
I'm not sure if CSS3 or Ext.Video inside the Panel can help, i'm trying but the goal is to have html design separated from functional jscript.

[tubes]

I am looking for something similar- a carousel of videos- but the video won't transition with the rest of the cards (on iPad). Everything seems ok until you play the video, once played (or playing) it won't slide with the carousel and will always appear in front of the other slides.

I'm a newbie so I am using the kitchen sink demo as a guide... any help would be great, I am beginning to think this wasn't meant to be.


pages.Int_cgschmidt = new Ext.Panel({
cls: 'cards',
layout: {
type: 'card',
align: 'center'
},

defaults: {
flex: 1
},

items: [{
xtype: 'carousel',
items: [{
fullscreen: false,

items: [{
xtype: 'video',
style: {
marginTop: '20px'
},
url: 'resources/video/cg.mp4',
width: 640,
height: 480,
poster: 'resources/img/portfolio/cg1.jpg'
}],

layout: {
type: 'vbox',
align: 'center'
}

},
{
html: '<img src="resources/img/portfolio/cg2.jpg" />',
cls: 'card'
},
{
html: '<img src="resources/img/portfolio/cg3.jpg" />',
cls: 'card'
}]

}]
});

[tubes]

Dang.. just noticed the extra items [] array... updated code below- this works w/ the carousel, except the only way I can resize the video is by adding a pad around it- which I can live with, but doesn't seem very elegant.

Thanks for your help.


pages.Int_cgschmidt = new Ext.Panel({
cls: 'cards',
layout: {
type: 'card',
align: 'center'
},

defaults: {
flex: 1
},

items: [{
xtype: 'carousel',

items: [{

fullscreen: false,
xtype: 'video',
style: {
padding:'50px',
backgroundColor:'#FFF'

},

url: 'resources/video/cg.mp4',
width: 640,
height: 480,
poster: 'resources/img/portfolio/cg1.jpg',

layout: {
type: 'vbox',
align: 'center'
}

},
{
html: '<img src="resources/img/portfolio/cg2.jpg" />',
cls: 'card'
},
{
html: '<img src="resources/img/portfolio/cg3.jpg" />',
cls: 'card'
}]

}]
});