YouTube player displays over Topspin widgets Follow

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&amp;hd=1&amp;wmode=transparent” frameborder=”0″ allowfullscreen></iframe>


Click here to read a full article on this fix. 

Have more questions? Submit a request and our team will be able to help get you sorted.
Powered by Zendesk