Bookmarklet overlay content has z-index issues with YouTube

Thyme

New Member
Our site has a pretty basic bookmarklet feature, that users can use to post any link from any other web site to their profiles with us. It inserts some overlays, all of which are position: absolute and have some comically high z-index number, so it's almost always going to appear above any other site's content.This, however, doesn't seem to work when a user is on YouTube, and clicks the bookmarklet to share this to our site. Because YT's internal video player, just the player itself, now takes the highest z-index, no matter what. The rest of the page behaves, just the video player, now overlays all the bookmarklet's inserted content.This seems to happen in every version up to IE10, and even on Firefox on Linux/Ubuntu. I've read a lot of solutions which describe editing the YouTube embed code to fix the issue. Obviously, this can't happen when you're on YT itself instead of embedding. (Or can it?)If helpful, here is the bookmarklet code.\[code\] javascript:(function(){ var d=document.createElement('div'); d.setAttribute('id','mySite-url'); d.innerHTML='https://www.mySite.com'; d.style.display='none'; document.body.appendChild(d); var e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','https://www.mySite.com/js/bookmarklet.js'); document.body.appendChild(e); })();\[/code\]
 
Back
Top