General Discussion Unused CSS Stages CSS Animations Full-Page Animation Project: Part 2

Timothy Parenteau
Timothy Parenteau
7,515 Points

Does anyone else have a problem with the video slider covering up the instructor's code at the bottom of the screen?

Does anyone else have a problem with the video slider covering up the instructor's code at the bottom of the screen? The video options and slide bar at the bottom of the videos don't go away for me and it's hard to see what the instructor is always typing because on a lot of the videos they are typing by the bottom and the play button and video slider cover it up. Just wondering if anyone else has this problem and hoping maybe Team Treehouse see's this and tries to correct it. Not complaining it just kind of holds back the users learning experience is all. Thanks!

3 Answers

Alan Johnson
Alan Johnson
7,623 Points

This is definitely a problem with our video player, Timothy. We've got a project in place to try and fix a lot of those UX issues, unfortunately it's a project that got really big, really fast due to some difficulties we've had with styling the off the shelf player we use now. We've definitely made progress there, though, and know it's something we have to fix as soon as we can get a good solution together.

Thank you for the great feedback on this!

Harry James
Harry James
14,590 Points

Awesome to hear that you're going to update this!

I have had the same issue for some time as well. I usually have to just turn it off for a moment to see the code again.

Justin Horner
Justin Horner
Treehouse Guest Teacher

Thanks for the update on this issue Alan!

Kate Hoferkamp
Kate Hoferkamp
5,205 Points

If you move your mouse off of the video player, the slider and controls disappear until you mouse over the video player again.

A temporary fix, to a more long term problem. Hope this helps!

Harry James
Harry James
14,590 Points

Yes, this helps a bit however, the captions still stay on the screen.

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;
}
Nick Edwards
Nick Edwards
Pro Student 15,766 Points

I hadn't thought of that, nicely done! Hopefully this will sort out the issue I'm still having with the video slider.