PDA

View Full Version : How to pause sliding panel when embedded YouTube video is clicked



ddhebert
02-01-2012, 09:43 PM
1) Script Title:
Step Carousel Viewer v1.9

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.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
02-02-2012, 06:28 AM
Normally to stop the Carousel when a panel is clicked on is to make use of the onpanelclick event handler (http://www.dynamicdrive.com/dynamicindex4/stepcarousel_suppliment3.htm) 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 (http://code.google.com/apis/youtube/js_api_reference.html)), 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
02-02-2012, 02:30 PM
Thanks for the response. I will give this a try and post back with solution.

ddhebert
02-03-2012, 08:06 PM
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.