z-index issue with YouTube iFrame (in full screen mode)

Question

wondered if anyone can shed some light...

If you watch the video in full-screen mode on this page: http://singtonicity.com.gridhosted.co.uk/ you'll notice some elements float on top of the video (to view in fullscreen mode double-click the video whilst it's playing).

I am assuming this is to do with the classic iFrame/z-index issue but I just can't find away round this one.

I am wondering if it's anything to do with the default styling browsers give to iframes in full screen eg: iframe:-webkit-full-screen???

Any help is most welcome.

Thanks in advance

Richard

Answer 1

This is actually to do with the opacity and the animation you have. Try removing the fadein ease-in-out 1 CSS animation and check the result.

Take a look at this excellent article from Phillip Walton, should help clear a few things up: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 2

I had such problem in Safari browser. Needed to remove will-change css property from parent element to fix it.