One of my favourite javascript sliders is CSS Globe’s Easy Slider.  It is easy to implement, can hold any sort of content, and displays nicely when JavaScript is turned off.

The only problem arises when YouTube videos are embedded in the slider.  For the purposes of this article I am using a bit of text with a video embed floated right inside the slider list items, to achieve the layout shown below.

Aside from the content of the slider, the only change I have made to the EasySlider demo is to set auto to false.

In almost every major browser there is a showstopper of a problem: in Firefox and Opera 10 the videos are not hidden and can be seen to the left and the right of the slider, in IE8 the control buttons disappear, in IE6 & IE7 the text is missing and the video appears to be floated left, in Safari 4 for Windows the videos have a streaky rather than a sliding transition, and in Chrome there is a slight flicker when the videos are sliding.

You can see this happening at http://www.websiteni.com/tbps/easyslider/01.html.

The fix is dead simple.  Instead of using the default YouTube embed code, change it to valid HTML and set wmode to transparent like so.

<object style="float:right;width:250px;height:250px"
 type="application/x-shockwave-flash"
 data="http://www.youtube.com/v/FSFYSzbDEKE&hl=en&fs=1&rel=0">
<param name="movie" value="http://www.youtube.com/v/FSFYSzbDEKE&hl=en&fs=1&rel=0">
<param name="wmode" value="transparent"></object>
<!--scuse the inline styles-->

And that’s all there is to it.  You can see it working perfectly using this method at http://www.websiteni.com/tbps/easyslider/02.html.