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 Dave Kellett
Dave Kellett
7,605 Points

Video Player - An observation

Hi, I love the website first off.

One thing I noticed, is that the tutors, when typing out code for a project, often type it out towards the bottom of the screen as we see it. The play/pause bar sits at the same bottom of the screen, overlaying the code as its being typed out.

As quite a visual learner and dyslexic, I find it quite frustrating, because how I like to learn is to watch the code and memorise the process, while the explanation facilitates my understanding. I don't process information quite as quick as I did when I was younger, and even then I was not the fastest. Sometimes if I haven't "got" a concept or process first time around, I like to replay the video. Not the most efficient way to learn, but hey, whatever works..

Unfortunately the play/pause bar often covers the area that I'm reviewing and takes a while to fade out, which, when you're only looking to review 5 seconds, then you don't see what you need to see, and you end up replaying even more than otherwise.

Is there any chance there could be settings added so that the bar can be moved? Or if it could just be set outside of the viewing window that would be equally as helpful.

Cheers,

Dave

1 Answer

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

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;
}
Dave Kellett
Dave Kellett
7,605 Points

thank you for this, I forgot to thank you at the time of your answer but I'm grateful for the solution and have been using it!