Carousel with Embedded YouTube Video Problem

[dmillasich]

Hi - first time poster here.

I'm experimenting with Sencha Touch and have modified a bit of demo code found on the Sencha website. The code is an attempt at a carousel with three embedded youtube videos - one per card.

Testing on Chrome - all's good - each video is found on the corresponding card. However, in Safari, while the text content is changed, the embedded object _appears_ to not change. Looking at the DOM elements - it's a bit confusing, because each DOM element for the carousel has the correct object.

After trying a seemingly endless number of times to get the video to work in Safari by changing the options in the object I noticed during a test phase that if I grabbed the edge of the Safari browser window and resized it - VIOLA - the correct video in the carousel panel appeared. I switched to the next panel - incorrect video - resize the browser window, and again - the resize event seems to have triggered the panel to show the correct video.

I added a listener to the carousel to hook the cardswitch event. I'm catching it when it fires, however - the panel's show method doesn't seem to be sufficient to get the same effect. My code follows:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
// Create a Carousel of Items
var carousel = new Ext.Carousel({
items: [
{
html:'<h1>trailer: The Proposal</h1>'
+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/kPgZcW8MCaA">'
+ '<param name="movie" value="http://www.youtube.com/v/kPgZcW8MCaA"></param>'
+ '<param name="allowFullScreen" value="true"></param>'
+ '<param name="allowscriptaccess" value="always"></param>'
+ '<embed src="http://www.youtube.com/v/kPgZcW8MCaA" type="application/x-shockwave-flash" width="260" height="160"></embed>'
+ '</object>',
cls: 'card card1'
},
{
html:'<h1>trailer: 88 Minutes</h1>'
+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/zUCd805JDJk">'
+ '<param name="movie" value="http://www.youtube.com/v/zUCd805JDJk"></param>'
+ '<param name="allowFullScreen" value="true"></param>'
+ '<param name="allowscriptaccess" value="always"></param>'
+ '<embed src="http://www.youtube.com/v/zUCd805JDJk" type="application/x-shockwave-flash" width="260" height="160"></embed>'
+ '</object>',
cls: 'card card2'
},
{
html:'<h1>trailer: Hook</h1>'
+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/LxnR9e7M8Vw">'
+ '<param name="movie" value="http://www.youtube.com/v/LxnR9e7M8Vw"></param>'
+ '<param name="allowFullScreen" value="true"></param>'
+ '<param name="allowscriptaccess" value="always"></param>'
+ '<embed src="http://www.youtube.com/v/LxnR9e7M8Vw" type="application/x-shockwave-flash" width="260" height="160"></embed>'
+ '</object>',
cls: 'card card3'
}
],
listeners: {
cardswitch: function(){
Ext.Msg.alert('Switch', 'happens');
myPanel.show();
}
}

});
var myPanel = new Ext.Panel({
cls: 'cards',
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {flex: 1},
items: [carousel]
})
}
});

Does anybody have any ideas, or suggestions as to what I might try instead of the Panel.show() method when the cardswitch event occurs?

Thanks in advance.

[dmillasich]

<div class="bbcode_container">
<div class="bbcode_description">Code:</div>
<pre class="bbcode_code" style="height:372px;">
Ext.setup({
	tabletStartupScreen: 'tablet_startup.png',
	phoneStartupScreen: 'phone_startup.png',
	icon: 'icon.png',
	glossOnIcon: false,
	onReady: function(){
		// Create a Carousel of Items
		var carousel = new Ext.Carousel({
			items: [{
				html:'<h1>trailer: The Proposal</h1>'
					+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/kPgZcW8MCaA">'
					+ '<param name="movie" value="http://www.youtube.com/v/kPgZcW8MCaA"></param>'
					+ '<param name="allowFullScreen" value="true"></param>'
					+ '<param name="allowscriptaccess" value="always"></param>'
					+ '<embed src="http://www.youtube.com/v/kPgZcW8MCaA" type="application/x-shockwave-flash" width="260" height="160"></embed>'
					+ '</object>',
				cls: 'card card1'
			},
			{
				html:'<h1>trailer: 88 Minutes</h1>' 
					+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/zUCd805JDJk">'
					+ '<param name="movie" value="http://www.youtube.com/v/zUCd805JDJk"></param>'
					+ '<param name="allowFullScreen" value="true"></param>'
					+ '<param name="allowscriptaccess" value="always"></param>'
					+ '<embed src="http://www.youtube.com/v/zUCd805JDJk" type="application/x-shockwave-flash" width="260" height="160"></embed>'
					+ '</object>',
				cls: 'card card2'
			},
			{
				html:'<h1>trailer: Hook</h1>' 
					+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/LxnR9e7M8Vw">'
					+ '<param name="movie" value="http://www.youtube.com/v/LxnR9e7M8Vw"></param>'
					+ '<param name="allowFullScreen" value="true"></param>'
					+ '<param name="allowscriptaccess" value="always"></param>'
					+ '<embed src="http://www.youtube.com/v/LxnR9e7M8Vw" type="application/x-shockwave-flash" width="260" height="160"></embed>'
					+ '</object>',
				cls: 'card card3'
			}],
			listeners: {
				cardswitch: function(){
					Ext.Msg.alert('Switch', 'happens');
					myPanel.show();
				}
			}
		});
		var myPanel = new Ext.Panel({
			cls: 'cards',
			fullscreen: true,
			layout: {
				type: 'vbox',
				align: 'stretch'
			},
			defaults: {flex: 1},
			items: [carousel]
		})
	}
});
</pre>
</div>