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! While you're at it, check out some resources Treehouse students have shared here.

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

General Discussion

Brandon Schmalz
Brandon Schmalz
5,098 Points

Video controls never fade away on Chrome Version 36.0.1985.125\Mac

I noticed that the controls for the video player never fade away on Chrome Version 36.0.1985.125 for Mac.

This can be pretty frustrating when it covers up the code or anything else in the video. I switched to Safari and it is now working correctly.

Is there anything I can do to make this work correctly in Chrome?

4 Answers

Sage Elliott
Sage Elliott
30,003 Points

I find that they sometimes do stick up, but if I click on them(or usually anywhere in the browser) and then hover over the video and move off it again they will disappear. I'm really not a fan of them being shown in over the video as it does seem to get in the way when I'm looking at code...

Tomasz Jaśkiewicz
Tomasz Jaśkiewicz
5,399 Points

I use Opera 23.0.1522.72 and I have the same problem. I cannot make it fade away. I tried many things but no results.

Sage Elliott
Sage Elliott
30,003 Points

Not as convenient, but you can always download the videos. Or use the itunes feed to download all of them for that module.

I solved it in Chrome using an extension called Stylebot, to activate the User Applied to pages then I made a rule like this,

.mejs-container .mejs-controls {
    background: rgba(56,64,71,0.98);
    bottom: 0px;
    right: 30px;
    width: auto;
    height: 40px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset,rgba(0,0,0,0.1) 0 0 5px 5px;
    -moz-box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset,rgba(0,0,0,0.1) 0 0 5px 5px;
    box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset,rgba(0,0,0,0.1) 0 0 5px 5px;
    opacity: 0.4;
}