I have been working on a slideshow that involves building elements into an array, modifying the DOM, and using items from the array to fade in and out on a timer. While I have made progress, there are still a few things I would like to accomplish but I am uncertain about the next steps.

There are two specific tasks I am looking to tackle:

1) I want to pause the slideshow timer when hovering over or clicking on it, and then restart the timer when un-hovering or clicking on other items on the page. This is necessary so that if a user clicks the play button on a YouTube video, the slideshow does not move to the next slide.

I understand that I could use something like: on hover() and click() // pause timer

but I am unsure of how to effectively stop and restart a setInterval timer within my code.

2) Another issue I am facing is with the YouTube videos not smoothly loading into the page. Instead of gracefully fading in, they exhibit lag during loading. Is there a way to preload the videos to achieve a smooth fade-in effect using the current approach?

If you'd like to take a look at the code I've been working on, here's the fiddle link: http://jsfiddle.net/designaroni/a34yF/

Here is a snippet of my code for reference:

HTML:

<div class="slideshow">
    <img src="http://placehold.it/401x401" />
    <img src="http://placehold.it/402x402" />
    <div class="video">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>
    </div>
    <img src="http://placehold.it/404x404" />
    <img src="http://placehold.it/405x405" />
    <div class="video">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>    
    </div>

CSS:

.media .video,
.media img { background-color:#fad400; padding:10px; margin:0px; height:100%;}
.slideshow { width:100%; height:400px; }
.media { height:100%; }

JS

/*
* 1) input objects into arrays 
* 2) write html to remove excess html, add items inside .media div... and other stuff
* 3) do slideshow stuff to the content
*
*
*
*/

(function ($) {

/*make it global*/
//array w/ multiple media types - .video contains youtube iframes
media = $( ".slideshow img, .slideshow .video" );
//remove items from dom
$( ".slideshow img, .slideshow .video" ).remove();
var width = $('.slideshow').width()
// end make globes

//make .media div
$(".slideshow").append("<div class='media'></div>");
//use first and .html() into .media
$(".media").html(media[0]);

$.fn.simpleSlider = function(options)  {
    //give the user options
    var defaults = {
        pause : 5000,
        speed : 400,
        descriptionSpeed: 400,
        transition : 'fade'
    },
    //merge options with defaults
    options = $.extend(defaults, options);
    //if statement
    if(options.transition === 'fade') fadesetint();
    /////////////////////////////////////////////////////////////////
    function fadesetint() {
        //this will start the animation
        fadeBeginNow = setInterval(fade, options.pause);
    }
    /////////////////////////////////////////////////////////////////
    //KEY
    /////////////////////////////////////////////////////////////////
    function currentImageKey() {
        currentMedia = $(".media").children()[0]
        i = $.inArray(currentMedia, media)
        return i;
    }
    /////////////////////////////////////////////////////////////////
    //FORWARD & BACK
    /////////////////////////////////////////////////////////////////
    //will fade & move the slideshow forward one step
    function fade() {
        currentImageKey();
        if (i < media.length -1) {
            fadeImage(i + 1);
        } else {
            fadeImage(0);
        }
    }

    //will fade & move slideshow backward one step
    function fadePrev() {
        currentImageKey();
        if (i == 0) {
            fadeImage (media.length - 1);
        } else {
            fadeImage(i - 1);
        }
    }
    /////////////////////////////////////////////////////////////////
    //ANIMATION
    /////////////////////////////////////////////////////////////////
    //fade animate & change media to variable passed to i
    function fadeImage(i) {
        $('.media').children().stop().animate({
            opacity: 0,
        }, options.speed, function() {
            $(".media").html(media[i]).children().css({opacity: 0})
            $('.media').children().stop().animate({
                opacity: 1
                }, options.speed)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            })    
        }
    }; // end simpleSlider
})(jQuery);

//this code below runs in your html while plugin above runs in external script 
$('.slideshow').simpleSlider({
    pause : 6000,               //can set transition pause in mill
    speed : 500,                //can set transition speed in mill, this is in ### AND out ###
    descriptionSpeed : 400,     //can set transition speed in mill, this is in ### AND out ###
    transition : 'fade',        //can set to slide or fade
});