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 Robert McIntosh
Robert McIntosh
1,645 Points

Feature Request: Theater Mode Experience for watching videos

I am not actually sure how you guys handle things like this, but to be honest twitch and Netflix ruined video viewing on sites for me. I love the fullscreen video experience I get with little to no other information in the way.

Actually I love it so much I have a local chrome extension I run that adds similar features to other sites I use all the time like YouTube and Roosterteeth. Since I have been spending so much time viewing videos here, I actually added it to your site to.

I was hoping to ask if you have plans to include this feature or not, I am going to share my css that implements it in this post. It might help someone who may be interested in a similar feature.

By the way thanks for making an awesome site. I am really loving the videos

html.videos-show main.content > .container {
    max-width: 100%;
    padding: 0px;
}
html.videos-show main.content .mixed-box .breadcrumb {
    background-color: rgb(42, 51, 59);
    margin: 0px;
    padding: 15px 0px;  
}
html.videos-show main.content .mixed-box .breadcrumb > .breadcrumb-title {
    margin: 0px auto;
    max-width: 1260px;
    padding-left: 15px;
}
html.videos-show main.content .mixed-box .breadcrumb .breadcrumb-title .breadcrumb-title-link {
    color: rgba(255, 255, 255, 0.9);
}
html.videos-show main.content .mixed-box .breadcrumb .breadcrumb-title .breadcrumb-title-link:hover {
    color: rgb(255, 255, 255) !important;
}
html.videos-show main.content .mixed-box #video-container {
    height: calc(100vh - 176px);
}
html.videos-show main.content .mixed-box #video-container :not(.mejs-container-fullscreen).mejs-container {
    height: 100%!important;
}
html.videos-show main.content .mixed-box #video-container :not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-inner {
    height: 100%;
}
html.videos-show main.content .mixed-box #video-container :not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-mediaelement {
    height: 100%
}
html.videos-show main.content .mixed-box #video-container :not(.mejs-container-fullscreen).mejs-container .mejs-mediaelement video {
    max-height: 100% !important;
    max-width: 100% !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
html.videos-show main.content .mixed-box #video-container :not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-controls:not(.connect-to-box) {
    margin: 0px auto;
    max-width: 1260px;
    opacity: 0.5;
    position: absolute;
    transition: opacity 0.4s ease-in-out;
}
html.videos-show main.content .mixed-box #video-container :not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-controls:not(.connect-to-box):hover {
    opacity: 0.9;
}
html.videos-show main.content .mixed-box .box-footer {
    margin: 0px auto;
    max-width: 1260px;
}
Robert McIntosh
Robert McIntosh
1,645 Points

It basically makes the video take the full view of the browser window.

I don't like full screen because I can't scroll down and see the teacher resources.

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Ah ha, that does sound pretty cool.

I wouldn't mind trying it out - if you don't mind - could you post some implementation instructions?

I've started copying the notes before the video just so I don't have to go back and forth like that (and keep them up on my other monitor).

Robert McIntosh
Robert McIntosh
1,645 Points

I could probably either release my extension on the chrome webstore.

Actually another and quicker way would be to install (CSS and Javascript Injection)[https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa/related]

And just past the css above into that extension while on this site.

1 Answer

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

What does your code do that hitting the full screen button doesn't?