Adventures with :fullscreen

I'm approaching the end of a small front-end build for a client that I've been working on over the past few months. It's been a fun WordPress build using Masonry which has set me some fun challenges to achieve what the client has required.

I did however run into a bug. The client has a few videos on Vimeo which they wanted to embed on their post pages. I rolled in some custom fields which took the Vimeo page and output the full embed code (to make it as easy as possible for the end client to use).

This worked perfectly on my screen and my test pages, however on their screen (Safari 6 on OSX 10.7), putting the video full screen didn't work as expected. Any other embedded Vimeo videos on the page floated above the fullscreen video. It appeared to be a real edge case with all other BrowserStack tests showing this working correctly.

I was always under the impression that fullscreen video was a native feature of browsers and that browsers would automatically put any video front and center over any other content so I was bewildered as to why this was happening.

I spoke with my friend Paul Adam Davis at a CroydonCreativ.es event back in October and he corrected me on my views of how full screen worked. So sure enough, I went home, opened up my macBook and set to work. Setting the z-index of the video in web inspector made the video front & center with no content obstructing the full screen view.

.element iframe {
  position: relative;
  z-index: 2;
}

Excellent, so a quick CSS edit later and my new z-index changes were implemented... except they hadn't. Well, they had, but the z-index values also applied to the other embedded videos on the page and showed them (again) floating above the full screen video.

So I googled to see if there was a way of selecting full screen elements. I'll be honest, I was clutching at straws but fortunately, an MDN article came to the rescue; the :fullscreen pseudo-class

Now, I could specifically target full screen video, and give that an elevated z-index value and all would be right in the world.

.element iframe:fullscreen,
.element iframe:-webkit-full-screen,
.element iframe:-moz-full-screen {
  position: relative;
  z-index: 2;
}

And that fixed it, happy Anthony, happy client, happy bug-fixing :)