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!

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

Julius Danek
Julius Danek
4,935 Points
Posted by Julius Danek
Julius Danek
4,935 Points

New video format.

Hey guys. Team treehouse seems to have a new video format. It's slightly annoying as the only way I can scale it down is to change the size of my browser window. Can you bring back the option to reduce the video size while not having to reduce the window size? That'd be awesome.

Elina P.
Elina P.
23,148 Points
Elina P.
Elina P.
23,148 Points

I second that request. Also, the progress bar on top of the video could be relocated to a less prominent spot.

Marcus Parsons
Marcus Parsons
15,718 Points

Elina, you can use the code I created to scale down each video in the meantime while we wait for a solution.

1 Answer

Marcus Parsons
Marcus Parsons
15,718 Points
Marcus Parsons
Marcus Parsons
15,718 Points

I absolutely agree, Julius. I'd like to see a button that allows us to scale our video down to proportions that make sense for our screen size.

So, in the meantime, what I did was make a JS solution that you can copy and paste into the console of any page here on Treehouse that has a video, and it will shrink the video for you. :) The only thing you need to change is where it says var scale = '85%';. That's the value I used that is good for me. I tested this in Chrome and Firefox. :)

//Modular approach
function addStyle(newStyle) {
    var styleEl = document.getElementById('jss');
    if (!styleEl) {
        styleEl = document.createElement('style');
        styleEl.type = 'text/css';
        styleEl.id = 'jss';
        document.getElementsByTagName('head')[0].appendChild(styleEl);
    }
    styleEl.appendChild(document.createTextNode(newStyle));
}
//Change this value to a proportionate size for you
var scale = '85%';
addStyle('#video-container { width:'+scale+' !important; height:'+scale+' !important;}');
Marcus Parsons
Marcus Parsons
15,718 Points

By the way, just in case you're unaware, the changes you make to the page are purely on your end and will disappear if the page is refreshed or if you go to any other page.

Marcus Parsons
Marcus Parsons
15,718 Points

You're welcome! =D Here's an even more simplified version that works the very same (just far less modular) so there's less text to copy:

var styleEl = document.createElement('style');
//Change this value to be a proportionate size for you
var scale = '85%';
styleEl.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(styleEl);
styleEl.appendChild(document.createTextNode('#video-container { width:'+scale+' !important; height:'+scale+' !important;}'));
Marcus Parsons
Marcus Parsons
15,718 Points

Is it looking better on your end?