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

Posted by Chris Daltas
Chris Daltas
2,207 Points

BUG: Video Player Controls Should Not Hover Over Instructions

While watching video instruction, the player controls frequently cover the instructions. Basically if you mouse over the video player to pause, or just accidentally there is a chance you are going to end up cover up what you are trying to look at. This is a super annoying and unnecessary behavior. The video player controls should NEVER block the instructional content, they should sit below the content like a YouTube video.

James Barnett
James Barnett
39,199 Points

The best way to get help for technical issues and generally things that don't seem to be working right please is to contact support directly by emailing help@teamtreehouse.com

1 Answer

Zeus Intuivo
Zeus Intuivo
13,129 Points
Zeus Intuivo
Zeus Intuivo
13,129 Points

In my case, I applied the transparency to my browser styles. I solved it in Chrome using an extension called Stylebot, to activate the User Applied CSS to pages. I am sure Firefox can also use User CSS . 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;
}