Video player Controls and Widget controls are BROKEN
Whatever you've done in your recent Twitch updates with the channel video player layouts, it's completely broken. The Video Player Controls are hidden under the page, and so are the Widget Controls, I can't close Widgets that show as an overlay on the stream video player, because they're ALSO hidden under the page. I've had to apply my own CSS override just to show me the video player controls because SOMEONE screwed up on their end with the CSS code which caused these things to hide under the page layers.
I applied the following which doesn't outright fix it, but move the video player controllers back UP into view.
.tw-bottom-0 {
bottom: 8px!important;
}
NOT AN IDEAL FIX, AND DOESN'T FIX ANYTHING PROPERLY SINCE IT MOVES THE CHAT WINDOW UP ALONG WITH THE VIDEO PLAYER CONTROLS. THIS NEEDS TO BE PROPERLY ADDRESSED AND FIXED!
I checked if this was same issue both in Chrome and in Firefox and I can confirm that it is. Except in Firefox you can't click or hover over ANY of the video player controls that are hiding UNDER the page layers. With Chrome you can KIND-OF hover over the video player elements to see their pop-up balloons telling you the shortcut keys, but you can't click them at all.
I can't believe you'd push a site change update that messes with the video player controls and hides them under the page layers.
Just to show you how badly broken the layout it is → https://imgur.com/a/EPw0anH
The video player controls clearly shows the video controls hidden under the page, not only that the full size of the video is even cropped off too.
-
TheAlkaris commented
Here's a better fix to the issue that still persists. Temporary fix to add to Stylus or GreaseMonkey.
.channel-root + .persistent-player[style] {
top: 0px;
left: 0px;
position: absolute;
width: 100%;
max-width: calc(100% - 0px);
max-height: calc(100vh - 130px) !important;
overflow: hidden;
z-index: 1;
height: auto;
transition: transform 0.5s ease 0s;
transform-origin: center top;
transform: scale(1);
}Just to iterate, I'm not a CSS wizard, I just took what I knew and applied it to that to overwrite the site's default using a browser extension. Maybe Twitch can apply this as a full proper fix? since the person who wrote the code before isn't good enough, and uses far too many `!important` elements to their CSS code which is really unnecessary, because it's like you're trying to compensate for something which overrides previously defined elements for objects on the page.