If you've embedded a YouTube video player on your site in close proximity to a Topspin widget, it's possible you've run into a very frustrating "overlap" issue, which has the effect of displaying your YouTube player "in front" of your Topspin widget (only in some browsers - Chrome among them). Your YouTube iFrame code is basically an element on your page, as is your Topspin widget. This is due to what’s called the “z-index” of the page, which helps browsers understand which elements to display in which order (front-to-back). If your widget is appearing behind the YouTube iFrame video, then most likely the z-index of your widget is lower than what YouTube is assigning their video player.
Fear not! This issue can be resolved with a simple edit to your YouTube embed code. Just add ?wmode=transparent to your embed code like so:
Original embed code:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM” frameborder=”0″ allowfullscreen></iframe>
Modified embed code:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>
NOTE: If your YouTube embed code already contains additional parameters, you'll need to use an ampersand to apply the above fix, like so:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&hd=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>
or
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&hd=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>