How to pause sliding panel when embedded YouTube video is clicked

[ddhebert]

1) Script Title:
Step Carousel Viewer v1.9

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:
I have embedded a YouTube video in HTML inside one of the panels, but when i click to activate the video, it does not stop the slideshow, so the next panel slides in while the video is still playing. How can I get the autoslideshow to stop when the video is clicked?

[ddadmin]

Normally to stop the Carousel when a panel is clicked on is to make use of the onpanelclick event handler of the script and calling the method that cancels the auto rotation:

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:1000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['ajax', 'path_to_external_file']
	onpanelclick:function(){
		stepcarousel.stopautostep(this)
	}
})

In your case though it doesn't work, since JavaScript isn't able to detect a click on a Flash object like the YouTube video. There's probably a way around this, though I'm not familiar with Flash. FYI once you've figured it out (a good start might be here), the JavaScript method to call outside the Carousel Initialization code to stop a Carousel is:

stepcarousel.stopautostep(stepcarousel.configholder['galleryid')

Where "galleryid" is the ID of your Carousel container.

[ddhebert]

Thanks for the response. I will give this a try and post back with solution.

[ddhebert]

Thanks again for replying. From your suggesstions I was able to determine a solution. You need to add an event listener to determine the state of the video. Below is the working code:

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener('onStateChange','onytplayerStateChange');
}

function onytplayerStateChange(newState) {
playerState = newState;

if (playerState == 1)
stepcarousel.stopautostep(stepcarousel.configholder['mygallery'])
}

In this case, 1 is the state when the video is playing.

Thanks.