Hi guys , I'm trying to get an animation to pause on mouse hover and resume on mouse out and if is possible to pause for x seconds on mouse click or to stop completely and resume on refresh. I have this slider , the part where i can turn off the animation or set it to auto i got fixed . But i can put a video in there as you can see but if the animation is set to cycle if i play the video it goes away and that pretty much make the video useless. How can i make it to pause on mouse hover and to pause for x seconds if i click the video?

Here is the javascript


Code:
jQuery.noConflict();

jQuery(document).ready(function(){
	var et_theme_folder = jQuery("meta[name=et_theme_folder]").attr('content'),
		$et_top_menu = jQuery('ul#top-menu > li > ul'),
		et_disable_toptier = jQuery("meta[name=et_disable_toptier]").attr('content');

	jQuery('ul.nav').superfish({ 
		delay:       200,                            // one second delay on mouseout 
		animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
		speed:       'fast',                          // faster animation speed 
		autoArrows:  true,                           // disable generation of arrow mark-up 
		dropShadows: false                            // disable drop shadows 
	});

	if ( $et_top_menu.length ){
		$et_top_menu.prepend('<li class="menu-gradient"></li>');
	}

	var $featured_content = jQuery('#featured #slides'),
		et_featured_slider_auto = jQuery("meta[name=et_featured_slider_auto]").attr('content'),
		et_featured_auto_speed = jQuery("meta[name=et_featured_auto_speed]").attr('content');
		
	if ($featured_content.length){
		var et_featured_options = {
			timeout: 0,
			speed: 500,
			cleartypeNoBg: true,
			prev:   '#featured a#featured-left', 
			next:   '#featured a#featured-right',
			pager:  '#controllers'
		}
		if ( et_featured_slider_auto == 1 ) et_featured_options.timeout = et_featured_auto_speed;
					
		$featured_content.cycle( et_featured_options );
	}

	var $et_media_slider = jQuery('#media-slider');
	if ( $et_media_slider.length ){
		$et_media_slider.cycle( {
			timeout: 0,
			speed: 500,
			cleartypeNoBg: true,
			prev:   '.recent-inner a#media-left', 
			next:   '.recent-inner a#media-right'
		} );
	}

	var $et_media_thumb = jQuery('.media-thumb');
	$et_media_thumb.hover(function(){
		jQuery(this).find('img').fadeTo('fast', 0.8);
		jQuery(this).find('.more,.zoom').fadeTo('fast', 1);
	}, function(){
		jQuery(this).find('img').fadeTo('fast', 1);
		jQuery(this).find('.more,.zoom').fadeTo('fast', 0);
	});
		
	var $footer_widget = jQuery("#footer-widgets .footer-widget");
	if ( $footer_widget.length ) {
		$footer_widget.each(function (index, domEle) {
			if ((index+1)%3 == 0) jQuery(domEle).addClass("last").after("<div class='clear'></div>");
		});
	}

	et_search_bar();

	function et_search_bar(){
		var $searchform = jQuery('#search-form'),
			$searchinput = $searchform.find("input#searchinput"),
			searchvalue = $searchinput.val();
			
		$searchinput.focus(function(){
			if (jQuery(this).val() === searchvalue) jQuery(this).val("");
		}).blur(function(){
			if (jQuery(this).val() === "") jQuery(this).val(searchvalue);
		});
	}

	if ( et_disable_toptier == 1 ) jQuery("ul.nav > li > ul").prev("a").attr("href","#");

	var $comment_form = jQuery('form#commentform');
	$comment_form.find('input, textarea').focus(function(){
		if (jQuery(this).val() === jQuery(this).next('label').text()) jQuery(this).val("");
	}).blur(function(){
		if (jQuery(this).val() === "") jQuery(this).val( jQuery(this).next('label').text() );
	});

	$comment_form.find('input#submit').click(function(){
		if (jQuery("input#url").val() === jQuery("input#url").next('label').text()) jQuery("input#url").val("");
	});
});


And here is the php for the slider, if it is of any help


Code:
<!-- Start Featured -->	
	<div id="featured">
		<div id="slides">
		<?php
			global $wp_embed, $ids;
			
			$ids = array();
			$arr = array();
			$i=1;
						
			$featured_cat = get_option('feather_feat_cat');
			$featured_num = get_option('feather_featured_num');
			
			if (get_option('feather_use_pages') == 'false') query_posts("showposts=$featured_num&cat=".get_catId($featured_cat));
			else { 
				global $pages_number;
				
				if (get_option('feather_feat_pages') <> '') $featured_num = count(get_option('feather_feat_pages'));
				else $featured_num = $pages_number;
				
				query_posts(array
								('post_type' => 'page',
								'orderby' => 'menu_order',
								'order' => 'ASC',
								'post__in' => (array) get_option('feather_feat_pages'),
								'showposts' => (int) $featured_num)
							);
			}
			
			while (have_posts()) : the_post();
				$et_feather_settings = maybe_unserialize( get_post_meta($post->ID,'et_feather_settings',true) );
				
				$variation = isset( $et_feather_settings['et_fs_variation'] ) ? (int) $et_feather_settings['et_fs_variation'] : 1;
				$link = isset( $et_feather_settings['et_fs_link'] ) && !empty($et_feather_settings['et_fs_link']) ? $et_feather_settings['et_fs_link'] : get_permalink();
				$title = isset( $et_feather_settings['et_fs_title'] ) && !empty($et_feather_settings['et_fs_title']) ? $et_feather_settings['et_fs_title'] : get_the_title();
				$description = isset( $et_feather_settings['et_fs_description'] ) && !empty($et_feather_settings['et_fs_description']) ? $et_feather_settings['et_fs_description'] : truncate_post(450,false);
				$video = isset( $et_feather_settings['et_fs_video'] ) && !empty($et_feather_settings['et_fs_video']) ? $et_feather_settings['et_fs_video'] : '';
				$video_manual_embed = isset( $et_feather_settings['et_fs_video_embed'] ) && !empty($et_feather_settings['et_fs_video_embed']) ? $et_feather_settings['et_fs_video_embed'] : '';
				
				$additional_class = ' ';
				$width = 396;
				$height = 233;
				
				switch ($variation) {
					case 2:
						$additional_class .= 'pngimage';
						$width = 396;
						$height = 233;
						break;
					case 3:
						$additional_class .= 'description-left';
						break;
					case 4:
						$additional_class .= 'description-center';
						break;
					case 5:
						$additional_class .= 'full-image';
						$width = 812;
						break;
				}
		?>
				<div class="slide clearfix<?php echo esc_attr($additional_class); ?>">
					
					<?php if ($variation != 4) { ?>
						<div class="featured-img">
							<?php if ( $video == '' && $video_manual_embed == '' ) { ?>
								<a href="<?php echo esc_url($link); ?>">							
									<?php $thumbnail = get_thumbnail($width,$height,'',$title,$title,false,'Featured');
									$thumb = $thumbnail["thumb"];
									print_thumbnail($thumb, $thumbnail["use_timthumb"], $title, $width, $height, ''); ?>
				
									<?php if ( in_array($variation, array(1,3,5)) ) { ?>
										<span class="overlay"></span>
									<?php } ?>
								</a>
							<?php } else { ?>
								<?php if ( $variation != 2 ) { ?>
									<div class="video-slide">
								<?php } ?>
								<?php
									if ( $video <> '' ) { 
										$video_embed = $wp_embed->shortcode( '', $video );
										if ( $video_embed == '<a href="'.esc_url($video).'">'.esc_html($video).'</a>' ) $video_embed = $video_manual_embed;
									} else {
										$video_embed = $video_manual_embed;
									}
																		
									$video_embed = preg_replace('/<embed /','<embed wmode="transparent" ',$video_embed);
									$video_embed = preg_replace('/<\/object>/','<param name="wmode" value="transparent" /></object>',$video_embed); 
									$video_embed = preg_replace("/height=\"[0-9]*\"/", "height={$height}", $video_embed);
									$video_embed = preg_replace("/width=\"[0-9]*\"/", "width={$width}", $video_embed);
									
									echo $video_embed;
								?>
								<?php if ( $variation != 2 ) { ?>
									</div> <!-- end .video-slide -->
								<?php } ?>
							<?php } ?>
						</div> 	<!-- end .featured-img -->
					<?php } ?>
					
					<?php if ($variation != 5) { ?>
						<div class="description">
							<h2 class="title"><a href="<?php echo esc_url($link); ?>"><?php echo esc_html($title); ?></a></h2>
							
							<p><?php if ( $variation == 4 ) echo '"'; ?><?php echo $description; ?><?php if ( $variation == 4 ) echo '"'; ?></p>
						</div> <!-- end .description -->
					<?php } ?>
				</div> <!-- end .slide -->
		<?php
				$ids[]= $post->ID;
			endwhile; wp_reset_query();	
		?>
		</div> <!-- end #featured_content -->
		
		<div id="controllers" class="clearfix"></div>
		
		<a id="featured-left" href="#"><?php esc_html_e('Previous','Feather'); ?></a>
		<a id="featured-right" href="#"><?php esc_html_e('Next','Feather'); ?></a>
	</div>	<!-- end #featured -->