owncast
Make the video container fill to screen height
Share your bug report, feature request, or comment.
There's quite a bit of wasted space in the current video frontend. Would it be ok to allow the video to fill the screen and push the static content like server info and the notify button down? I don't think they are of much interest to the viewers.
| Current | Better? | Alternative |
|---|---|---|
I also tweaked the header and chat sizes a little to take less space.
There's a pretty simple reason it is how it is, and that's to encourage people to scroll down by showing there's more content. In your version the video fills the entire "above the fold" space, and there's no way to even know there's lots of buttons to press, helpful text to read, etc. Sometimes these buttons and text are pretty important for a streamer (donations, rules, etc). I know you don't think they're important, but they are.
I don't think this approach is bad, however, I'm a fan of information density and taking advantage of space, and reducing emptiness, but in this case it's a balance between the video and the rest of the page. Nothing will be perfect for everyone.
You're 100% welcome to make any changes to your instance that you like, of course. Maybe if you leave your CSS changes here other people can use them as well if they want to make the changes you did.
Fair point, the content below the video isn't important to me and my viewers, but I understand that other users may care about it more. That being said, I still think the video is shrunk down more than necessary. How about cutting the bottom portion off at the notify button instead? Or maybe decreasing header and footer heights would be more appropriate to give the video container more than 75vh height?
| 1 | 2 |
|---|---|
The stream timer and viewer count could also be placed into the unused space around the notify button (similar to twitch ui) to reclaim a bit of vertical space.
The stream timer and viewer count could also be placed into the unused space around the notify button
It looks like you have the stream name inline with the action button bar. What if the stream had a longer name and more than a couple buttons?
Or maybe decreasing header and footer heights
I'm not opposed to making the header slightly less tall, but in your screenshots it looks broken and too small. There's no vertical space around the logo at all. The footer isn't that big, but you'll be unhappy to hear it looks like we're going to have to make the footer static. See #2983
Admittedly, it's a bit too late in the game to discuss opinions around layout changes if we're ever going to release Owncast v0.1.0. However I'm happy to keep discussing options for future releases.
What if the stream had a longer name and more than a couple buttons?
Isn't that kind of an edge case? How long would you expect a reasonable instance name to be? Maybe there should be a limit on the name length, considering it's currently possible to set a very long name that breaks the UI.
The text font is also unnecessarily large and can be decreased to both take less vertical space and allow longer titles without overlapping. The margin left to the icon is rather big as well. It should also be possible to dynamically push the inlined title down if it does overlap with the action buttons. I'd say it's a good compromises for a more compact UI and larger video area.
See how compact and dense twitch footer is while having a significantly smaller height.
There's no vertical space around the logo at all.
I thought I gave enough height to the header for the logo to fit comfortably. There is space around it but I suppose it's not very clear in the screenshots
In any case, the header (and the text inside it) can be shrunk down for more video space as well, if not to the level in my screenshots.
It's clear you have a much larger screen than I have. It's not an edge case for me.
At an aspect ratio like that you would have enough vertical space for none of this to matter as a regular sized (16:9 or higher) video at full width would leave enough space for a lot of content anyhow. In fact, it seems owncast gives the video container a lot more space than necessary at the screen resolution you posted, and pushes the bottom content further down than necessary.
| Current | Better? |
|---|---|
Maybe 75vh isn't the right choice for the video container height. 100% with fixed position bottom content might be more space efficient, though I have to admit I don't know a whole lot about css.
I'm sorry, we might be speaking past each other here. A 16:9 video would fit just fine in your screenshot as the chat is (appropriately) larger and the video container has less available width as a result, leaving some mandatory vertical space. The change I'm proposing, which is increasing the video container height value, would not even affect a tablet screen, as the relevant properties are already overwritten by @media rules. If you meant the screenshot as an example of a layout where inlined title and action buttons can overlap, well, you can dynamically put them on separate lines (similar to how twitch does it) like in my previous example. As I said earlier, there is enough unused vertical space in a screen layout like in your screenshot to have a large bottom content without eating into the video container, so this is a nonissue for a tablet screen.
If you take a look at my first screenshot you'll notice that the video has excessive horizontal margins squeezing it to account for the static bottom content. On my 1080p 16:9 monitor there is ample horizontal space to fit a reasonably sized title and a few action buttons inline and give the actual content of the stream more space. More of the remaining 25vh+ of height can be reclaimed by decreasing the margins between texts, making the font smaller, and other changes I mentioned. Even if resizing the UI elements to have a more compact bottom layer as I described is not possible, the layout in my third screenshot shows how you can allocate minimal space for the title and action rows and making it apparent that there is scrollable content, while suqeezing the video to a lesser degree, which should be a good compromise. I think it's absurd that almost 30% of my vertical screen real estate is taken up by static content that viewers need to look at once.
@kylosus Not sure if this would be useful for your case, but I did just merge in a css var of --player-container-height that set to 75vh by default. Maybe that'll be useful for you to hook into and override with custom css after 0.1.0 goes out.
@gingervitis that's nice. It's not particularly useful for me since I already have a branch with other customizations, but it's good to have the option nonetheless.
@kylosus if possible could you explain what you did to change the header and chat sizes? I've been attempting to make the same change that you did but failing
@v4vazquez Sure, my changes are in these two commits.
https://github.com/kylosus/owncast/commit/cc3c06226396a2a700a8d9201ea513fadbd4f5b7 https://github.com/kylosus/owncast/commit/6ea74ccc7ad7785f13d4903c156b5b23e10d6e9f
I prety much just modified the header and sidebar dimensions by hand until they looked alright. They may not be perfect in all screen sizes.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this was a feature request that others have shown no interest in then it's likely to not get implemented due to lack of interest. If others also want to see this feature then now is the time to say something! Thank you for your contributions.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this was a feature request that others have shown no interest in then it's likely to not get implemented due to lack of interest. If others also want to see this feature then now is the time to say something! Thank you for your contributions.