Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Drew Butcher
Drew Butcher
33,160 Points
Posted by Drew Butcher
Drew Butcher
33,160 Points

How do I make a DIV visible on top of an HTML5 fullscreen video?

When you are using firefox as your browser and you watch one of the treehouse videos in full screen they guys have the figured out how to get the video controls to lay overtop the video. How did they do that? I have figure out how to get the video controls to overlay the video in Safari and Chrome for fullscreen using a z-index: 2147483647; however this same trick does not work for safari and I was wondering how treehouse solved this problem.

http://stackoverflow.com/questions/15770080/how-do-i-make-a-div-visible-on-top-of-an-html5-fullscreen-video

3 Answers

Drew Butcher
Drew Butcher
33,160 Points
Drew Butcher
Drew Butcher
33,160 Points

To answer my own question :) I believe the correct way do to this is to place a container about the video element and the video controls and make the container full screen not the video element....

When I have a working model I will post the solution here.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Drew Butcher,

We use MediaElement.js to display our videos, so the browser and device support comes with the tool. :)

Check out how MediaElement.js works.

Drew Butcher
Drew Butcher
33,160 Points
Drew Butcher
Drew Butcher
33,160 Points

I saw the use of MediaElement in the markup. So are they using Javascript to get element to overlay the video in fullscreen for Firefox or are they using a css trick i don't know about? I have tried everything I could think of :/

Zakk George
Zakk George
4,550 Points
Zakk George
Zakk George
4,550 Points

You can also try using the position property.

  .media-controller {
  position: absolute;
}

http://www.w3schools.com/css/css_positioning.asp

Hope this helps!

Drew Butcher
Drew Butcher
33,160 Points
Drew Butcher
Drew Butcher
33,160 Points

Nope that not did work :( here is an example http://jsfiddle.net/TcpX5/36/ if you open in firefox and right click on the video then select fullscreen you will loose the link :(

Treehouse is magic! How do they do it?