Treehouse video bar | Feature Request

Yes, I've also experienced some inconvenience when watching videos and working along with the teachers.

Hiding the bar after a shorter duration would be a good solution.

Another plausible way to solve the intrusive bar problem would be to make the buttons a bit smaller.

And yes, Treehouse will always remain awesome no matter what :D

What I don't like is that the bar doesn't disappear at all if you're viewing in full screen.

i would suggest why not adapt the same style which Youtube currently using for playing the video. That is, the video control bar will minimize as a thin line at the bottom of the video which is very user-friendly to get to know the progress of the video.

I tried having the browser and editor split horizontally but the text in the video (when the instructor is coding) is usually too small.

I have now been scrolling the video up a little bit, just enough so that I can place my editor at the bottom of the screen and it's been working out not too bad lately. Screenshot example.

I'm definitely not discounting the valid concerns brought up in this thread, rather I am simply showing my workflow layout when watching videos and coding along.

I also find this to be a problem

I find this to be a big problem because the Android teacher often writes his code in the bottom of the screen. My progress bar won't go away at all, so I often have to get the captions up, which makes it a bigger problem. Also, I find putting up the captions to be a problem as then it blocks my view of the code, meaning I have to pop them up, then put them down, adding another problem.

One other thing is that on another computer, when I sign into Treehouse and then go to the current video that I'm on, I have no problems at all. It's just weird.

Agreed. The video bar is problematic at best.

I could see on an entertainment web site that hiding the controls would be beneficial to the user. But we are students with very different needs from a typical consumer of video on the web. We need to pause, play, and access to the timeline quite often to do all the tasks we're trying to complete while the video is playing. It would make sense to just have the controls always available below the player window and not placed over the viewable content that we're trying to learn from.

Chapters and bookmarks would be cool too!

Feel free to apply awesome design to this.

Huge fan of Treehouse.

Yes, it was kind of hard to find this forum, but I would like it if the bar could go away after I start watching. As an example I am not sure what the instructor is typing

at 4:43

css-foundations/selectors/class-and-id-selectors

Thanks!

In Chrome, I just right-click the bar and select "Inspect Element." That brings up developer mode. I add "visbility: hidden" at the end of the CSS rules for div.mejs-controls and that makes the progress bar disappear.. When I want the progress bar back, I just unclick it.

yep, problem on my end. I figured it out.

In Chrome, I just right-click the bar and select "Inspect Element." That brings up developer mode. I add "visbility: hidden" at the end of the CSS rules for div.mejs-controls and that makes the progress bar disappear.. When I want the progress bar back, I just unclick it.

Thank you very much Christopher Hughes.

The visibility: hidden; in the css rules worked great but is there a way to configure so they reappear on hover?

either fix this or make sure your content isn't hidden by the bar, there's several slides I've seen where I cant read a link you refer to because the bar is above it, surely just setting the controls to fade out after 2-3 seconds and reappear on hovering the lower portion of the video wouldn't be that hard to code considering the awesome site you've built! I'm guessing this is just a low priority bug and your developers are busy working on other stuff, but this should be considered a high priority since it's creating terrible UX

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;
}