Okay, unfortunately, I can't give you my website because it's on an internal stage server.

Having said that, here's my issue.

I'm adding content to a simple javascript slider. The images on slides 1,3, and 4 are perfect. The issue is slide 2. Slide 2 includes a video. There's an image as a background on this slide, but there's a video on the left side of it.
Screenshot of How it SHOULD look.
Screenshot of How it CURRENTLY looks.

It's been difficult to place everything with CSS since it's all within the confines of a slider that's already affected by javascript.

Also, the slider is on autoplay to change every 3-5 seconds. How do I make it so that the slider stops autoplaying if somebody clicks on the video? This way the video can finish playing before it goes to the next slide...

The last issue I have is that when it DOES switch to the next slide, the video hangs out for just a moment until the animation is complete. In other words, the fade animation between slides doesn't affect the video and it stays until it's fully on the next slide...


Any thoughts anyone might have would be very helpful... Thanks!

Here's the JS from the slider:
Code:
<script type='text/javascript'>
    jQuery('#slider-1').cycle({
        next: '#next-1',
        prev: '#prev-1',
        fx: 'fade',
        timeout: 30000000,
        pause: 1,
        pager: '#slider-nav-pager-1',
        height: '433px',
        width: '960px'
    })
</script>