New YouTube update hides ambient light behind a black backdrop in fullscreen video's #272
Comments
|
Thanks for letting me know that there is a new YouTube update with a bug. Since I don't have the new update yet, could you:
You can get the experimental flags by typing (or pasting) a javascript line in the DevTools console:
|
|
Sorry for the delay, I was cooking up some dinner. Thanks for the quick response though! Lemme if I did anything wrong.
|
|
Thanks for listing the experiment flags. Sadly I'm unable to get the new layout with the experiment flags enabled. I think an element with a black background is overlaying the ambient light. So I think I need the new html of the webpage as well to create a fix. But I don't want your userdata, so I have written a few javascript lines that only logs the html of the video, it's the elements that contain the video and the backgrounds. const getTag = (element) => {
const background = element.computedStyleMap().get('background').toString();
const html = element.outerHTML;
const startTag = `${html.substring(0, html.indexOf('>'))} style="background: ${background}">`;
const endTag = `</${element.localName}>`;
return { startTag, endTag };
};
const getHtmlParts = (element) => {
const { startTag, endTag } = getTag(element);
let startHtml = startTag, endHtml = endTag;
if(element.parentElement) {
const parentHtml = getHtmlParts(element.parentElement);
const indent = new Array(getLevel(element)).fill(' ').join('');
startHtml = `${parentHtml.startHtml}\n${indent}${startHtml}`;
endHtml = `${indent}${endHtml}\n${parentHtml.endHtml}`;
}
return { startHtml, endHtml };
};
const getHtml = (element) => {
const { startHtml, endHtml } = getHtmlParts(element);
return `${startHtml}\n${endHtml}`;
};
const getLevel = (element) => {
for(let i = 0; true; i++) {
if(element.parentElement) { element = element.parentElement } else { return i };
}
};
const videos = document.querySelectorAll('video');
const html = [...videos].map(video => getHtml(video)).join('\n');
console.log(html);The output should look something like this (This is the html it outputs for my old YouTube layout): <html style="font-size: 10px;font-family: Roboto, Arial, sans-serif;" lang="en" darker-dark-theme="" darker-dark-theme-deprecate="" dark="" system-icons="" typography="" typography-spacing="" refresh="" data-ambientlight-hide-scrollbar="true" data-ambientlight-related-scrollbar="" data-ambientlight-enabled="" data-ambientlight-layout-performance-improvements="true" data-ambientlight-immersive="" style="background: rgb(15, 15, 15) none repeat scroll 0% 0% / auto padding-box border-box">
<body dir="ltr" rounded-container="" data-ambientlight-text-shadow="" style="--ytal-image-opacity: 0.715; --ytal-button-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.6)); --ytal-button-shadow-inverted: drop-shadow(0 0 3px rgba(255,255,255,0.6)); --ytal-text-shadow: rgba(0,0,0,0.3) 0 0 6px,
rgba(0,0,0,0.3) 0 0 6px; --ytal-text-shadow-inverted: rgba(255,255,255,0.3) 0 0 6px,
rgba(255,255,255,0.3) 0 0 6px; --ytal-video-debanding-background: url('chrome-extension://cokcldclnicoojbmfmbeoiajibcoilgn/images/noise-1.png'); --ytal-video-debanding-opacity: 0.84; --ytal-debanding-content: ''; --ytal-debanding-background: url('chrome-extension://cokcldclnicoojbmfmbeoiajibcoilgn/images/noise-1.png'); --ytal-debanding-opacity: 0.96;" class="" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<ytd-app darker-dark-theme="" frosted-glass-mode="none" style="--ytd-app-fullerscreen-scrollbar-width: 17px; --ytd-masthead-height: 56px; --ytd-network-status-banner-display: unset;" style="background: rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div id="content" class="style-scope ytd-app" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<ytd-page-manager id="page-manager" class="style-scope ytd-app" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<ytd-watch-flexy class="style-scope ytd-page-manager watch-root-element hide-skeleton" theater-requested_="" video-id="00000000" js-panel-height_="" flexy-enable-small-window-sizing="" flexy-enable-large-window-sizing="" cinematics-enabled="" rounded-player-large="" flexy="" rounded-info-panel="" is-dark-theme="" is-four-three-to-sixteen-nine-video_="" is-two-columns_="" theater="" full-bleed-player="" style="--ytd-watch-flexy-scrollbar-width: 17px; --ytd-watch-flexy-max-player-width-wide-screen: 1280px; --ytd-watch-flexy-space-below-player: 136px; --ytd-watch-flexy-panel-max-height: 460px; --ytd-watch-flexy-chat-max-height: 460px; --ytd-watch-flexy-structured-description-max-height: 460px; --ytd-watch-flexy-comments-panel-max-height: 460px; --ytd-comments-engagement-panel-content-height: 460px;" role="main" playlist="" cinematic-light-theme="" watch-metadata-refresh="" has-metadata="" data-ytal-elem="ytd-watch" response-has-comments="" flexy-small-window_="" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div id="full-bleed-container" class="style-scope ytd-watch-flexy" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div id="player-full-bleed-container" class="style-scope ytd-watch-flexy" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div id="player-container" role="complementary" class="style-scope ytd-watch-flexy" style="touch-action: auto;" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<ytd-player id="ytd-player" context="WEB_PLAYER_CONTEXT_CONFIG_ID_KEVLAR_WATCH" class="style-scope ytd-watch-flexy" style="touch-action: pan-down;" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div id="container" class="style-scope ytd-player" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div class="html5-video-player ytp-transparent ytp-exp-bottom-control-flexbox ytp-modern-caption ytp-exp-ppp-update ytp-cairo-refresh ytp-cairo-refresh-signature-moments ytp-fit-cover-video ytp-bigboards ytp-fine-scrubbing-exp ytp-large-width-mode ytp-autonav-endscreen-cancelled-state paused-mode ytp-hide-info-bar" tabindex="-1" id="movie_player" data-version="/s/player/0ccfa671/player_ias.vflset/en_US/base.js" aria-label="YouTube Video Player" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<div class="html5-video-container" data-layer="0" draggable="true" style="width: 2020px;" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
<video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" style="width: 1022px; height: 575px; left: 128px; top: 0px;" src="blob:https://www.youtube.com/8d29e765-bae3-4408-ae99-7895c2b2644f" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
</video>
</div>
</div>
</div>
</ytd-player>
</div>
</div>
</div>
</ytd-watch-flexy>
</ytd-page-manager>
</div>
</ytd-app>
</body>
</html> |
|
It wouldn't let me copy the object this time, so I copied all the text, but for some reason it missed "VM1693:30" at the end of the first line, so I screenshot it for accuracy as well. Sorry man. Edit: It looks like the code I copied isn't showing, so I just attached a .txt file with it. www.youtube.com-1731677864087.log
|
|
Thanks, I do notice some differences already. |
|
It does not. However, if I sign into my account in Incognito, it does. |
|
Then YouTube has only enabled the experiment on your account. Could you check in the Elements tab (instead of the Console tab) if the And if the |
|
Here are replica screenshots of both of yours. For reference my monitor is 3840 x 1600.
|
|
That looks also correct. It's slightly moved a bit to much upwards, but that's not the reason why the sides are black. I don't know how much you know about DevTools. But you could try to find the black element for yourself. Look for a computed property with the background value
|
|
You can also hover over the property and click on the blue arrow to go line where the property is coming from: |
|
Hey mate, it's getting real late here. I haven't found anything like what you described yet (I'll give it another look tomorrow) but this is the closest I could get. If I hide the element highlighted in those images I could get ambient light to appear, but no video. In the third image there is something like what you described below that element, however I can't seem to change it or even hide it. I hope this helps, but if it doesn't I look some more tomorrow. Thanks for everything so far though.
|
|
Hey, I think you found it in the last screenshot! <style>
::backdrop {
background: none !important;
}
</style>If not, I will need a screenshot of the Styles tab it points to when you click on the blue arrow of the |
|
How do I add that to the webpage? |
|
Right click on an element, then choose Edit html. And paste the html at the end of the text input. Then click out of the text input to complete the change. |
|
It does appear to have removed the "::backdrop" however ambient light does not show and it seems to break the player (I can't fullscreen or control the player with mouse).
Just to clarify I; right clicked an element (I chose the one that I highlighted in the previous post), clicked "Edit as HTML", scrolled all the way to the bottom of the text prompt, pasted the code you supplied and clicked out of the prompt. It then exited me from fullscreen and appears to have broken the player. I did try pasting in a new line btw. If I paste it in any other element I get "An error occurred. Please try again later. (Playback ID: xk9hCIFkExufEeCa)". |
|
Hmm, I think you might have malformed the html in some way. Add.Style.Element.mp4 |
|
My bad, pimp. If I edit the highlighted one in this screenshot, it fixes it. Seems to be working perfectly
|
Yeah, I think that's what I was doing, my bad. |
|
No problemo. After adding the style element and clicking on the If not, we can investigate it further look tomorrow. Since it's getting late over there 😄 |
|
I do see that. |
|
But the sides are still black? |
|
No, they have ambient light, apologies for not being clearer, the player is working normally as well the only thing "wrong" now are the UI elements visible in the player now. However, that's not a big deal.
|
To clarify, I didn't even need to touch the background-color, it was transparent by default after entering your code. |
|
To add to the "issues" this is what the background looks like when ambient light is disabled (in the menu or with the G shortcut). Just pointing this out for the sake of a future fix. No pressure though, just having the ability to make ambient light work again is fucking awesome! EDIT: uploaded a second, brighter and clearer image.
|
|
Nice, then I can now reproduce YouTube's new update with the UI elements in the back: So, with this update they now make the So I guess I'll have to move my ambient light elements at the top of the Thanks for taking all this time to investigate! |
WesselKroos
changed the title
|
Hey, no worries man! This is probably the best extension for ultrawide users on Youtube. It's just fucking excellent. So, I'm happy to have helped. Thank you for giving me a fix. Goodnight, my guy. Let me know if you need any more help from me. |
Bug description
Ambient light does not show while watching a video in fullscreen. Appears to be related to the new update.
Steps to reproduce the behavior
Browser
Chrome, Opera
Operating system
Windows
Extension version
2.38.10
The bug still happens in these conditions
Additional context and/or screenshots
My main account was enrolled into the new update where you can't scroll down to the comments section of a video while you're in fullscreen (why did they do this!?). The issues goes away if I sight out or use a different account.
The text was updated successfully, but these errors were encountered: