Web development by Gabriele Romanato

Post navigation

jQuery: YouTube video slideshow

Creating a YouTube video slideshow with jQuery is exactly the same thing as creating any other jQuery slideshow. The only difference is that instead of divs or images we're dealing with the iframes used by YouTube to embed its videos in web documents. As you will see, there's nothing difficult with this. As usual, we start with our underlying markup first:

Iframes have been left-floated so now they're normal block-level elements. With jQuery, we have first to store all the iframe left offsets into an array using a custom function and then create a simple timer that cycles through this array using a progressive index incremented each time the timer runs: