YouTube Z-index iFrame (full screen)

Question

thought if anyone could shed some light ...

If you watch a video in full screen on this page: http://singtonicity.com.gridhosted.co.uk/, you will notice that some elements float on top of the video (to view in full screen, double-click the video during playback).

I assume this is due to the classic iFrame / z-index problem, but I just can't find it around.

I am wondering if this is related to the default style browsers in order to display iframes in full screen, for example: iframe:-webkit-full-screen???

Any help is appreciated.

Thanks in advance

Richard

Answer 1

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

Take a look at this wonderful article by Phillip Walton, which should help sort out a few things: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/