Sidebars are appearing in fullscreen and theater mode

[LostOdin]

Bug description

When in theater mode the black bars appear, same as about a month and a half ago

Steps to reproduce the behavior

Much like a month and a half ago when youtube update theater mode the black bars on the side overlap the ambient feature. Also the hide everything when in theater more isn't working

Browser

Opera

Operating system

Windows

Extension version

2.39.29

The bug still happens in these conditions

• [X] The bug still persist when I disable all other extensions (ex. in incognito mode with only this extension enabled)
• [X] When I logged out of my YouTube account (ex. in incognito mode)
• [X] In incognito mode

Additional context and/or screenshots

No response

[WesselKroos]

Hmm... Funny, they keep renaming the theater mode element. 1.5 months ago it was renamed from player-theater-container to player-wide-container. Now it has been renamed to player-full-bleed-container.

Anyway, I'll submit version 2.39.30 to the extension stores with the new name. Publication can take a while since the weekend starts now. If you manually want to fix it here is are the css rules you'll need:

html[data-ambientlight-enabled=true] ytd-app #player-full-bleed-container {
  background: none !important;
}

html[data-ambientlight-enabled=true] ytd-app #player-full-bleed-container {
  transition: background-color 0s 0.01s;
}

html[data-ambientlight-enabled=true][data-ambientlight-immersive=true] ytd-watch-flexy[theater] #player-full-bleed-container.ytd-watch-flexy {
  height: calc(100vh - 169px) !important;
  max-height: calc(100vh - 169px) !important;
  margin-top: 29px;
  margin-bottom: 84px;
}

[CasketPizza]

Hey, just wanted to say I'm experiencing the same and that css fix worked, thank you very much! <3

[Desoroxxx]

Hmm... Funny, they keep renaming the theater mode element. 1.5 months ago it was renamed from player-theater-container to player-wide-container. Now it has been renamed to player-full-bleed-container.

Anyway, I'll submit version 2.39.30 to the extension stores with the new name. Publication can take a while since the weekend starts now. If you manually want to fix it here is are the css rules you'll need:

html[data-ambientlight-enabled=true] ytd-app #player-full-bleed-container {
  background: none !important;
}

html[data-ambientlight-enabled=true] ytd-app #player-full-bleed-container {
  transition: background-color 0s 0.01s;
}

html[data-ambientlight-enabled=true][data-ambientlight-immersive=true] ytd-watch-flexy[theater] #player-full-bleed-container.ytd-watch-flexy {
  height: calc(100vh - 169px) !important;
  max-height: calc(100vh - 169px) !important;
  margin-top: 29px;
  margin-bottom: 84px;
}

How can I apply this fix?

[CasketPizza]

How can I apply this fix?

Install an extension called Stylus, it lets you apply themes for web pages. There's some good YouTube related ones like coloured progress bars etc.

Go to YouTube and click the extension icon, then where it says write style for this site, click the word YouTube. You'll get a new tab with two boxes on the right. In the lower box, paste the code between the { } where it says code here. Give it a name in the text box on the left like "YouTube Ambilight fix" and click save. That should fix it!

[WesselKroos]

YouTube has changed the html once again this evening. They seem to be experimenting with it, so I expect more changes in the coming weeks. But the store's review processes can't keep up, so I'm going to attempt to cover future changes as well.

If you manually want to fix it again here are the new css rules you'll need:

html[data-ambientlight-enabled=true][data-ambientlight-immersive=true] ytd-watch-flexy[theater] #full-bleed-container.ytd-watch-flexy {
  height: calc(100vh - 169px) !important;
  max-height: calc(100vh - 169px) !important;
  margin-top: 29px;
  margin-bottom: 84px;
}

html[data-ambientlight-enabled=true] ytd-app #full-bleed-container,
html[data-ambientlight-enabled=true] ytd-app #player-full-bleed-container {
  background: none !important;
}

html[data-ambientlight-enabled=true] #cinematics-full-bleed-container.ytd-watch-flexy {
  display: none !important;
}

html[data-ambientlight-enabled=true] ytd-app #full-bleed-container,
html[data-ambientlight-enabled=true] ytd-app #player-full-bleed-container {
  transition: background-color 0s 0.01s;
}

Just some technical notes to myself (Ignore these):

They have added a panels-full-bleed-container below the player-full-bleed-container. What are they up to?

It looks as if they are trying to make their ambient mode work in theater mode.

ytd-watch-flexy.loading-player #cinematics-container.ytd-watch-flexy,
ytd-watch-flexy.loading-player #cinematics-full-bleed-container.ytd-watch-flexy {
  display: none;
}

ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  height: 56.25vw;
  max-height: calc(100vh - 169px);
  min-height: 480px;
  overflow-x: clip;
  background: #000;
}

ytd-watch-flexy[is-dark-theme][theater]:not([fullscreen])[transparent-theater-mode] #full-bleed-container.ytd-watch-flexy {
  background: transparent;
}

ytd-watch-flexy[is-dark-theme][fullscreen][cinematic-fullscreen] #full-bleed-container.ytd-watch-flexy {
  overflow: hidden;
}

ytd-watch-flexy:not([fullscreen])[theater][full-window-mode_] #full-bleed-container.ytd-watch-flexy {
  width: 100vw;
  height: 100vh;
  min-height: 240px;
  max-height: none;
}

ytd-watch-flexy[fullscreen] #full-bleed-container.ytd-watch-flexy {
  height: 100vh;
  max-height: none;
}

#player-full-bleed-container.ytd-watch-flexy {
  position: relative;
  flex: 1;
}

ytd-watch-flexy:not([panels-beside-player]):not([fixed-panels]) #panels-full-bleed-container.ytd-watch-flexy {
  display: none;
}

ytd-watch-flexy[panels-beside-player][full-bleed-player] #panels-full-bleed-container.ytd-watch-flexy,
ytd-watch-flexy[fixed-panels][full-bleed-player] #panels-full-bleed-container.ytd-watch-flexy {
  width: var(--ytd-watch-flexy-sidebar-width);
}

ytd-watch-flexy[full-bleed-player] #columns.ytd-watch-flexy {
  margin-top: 0;
}

ytd-watch-flexy[full-bleed-player] #secondary.ytd-watch-flexy {
  margin-top: var(--ytd-margin-6x);
}

ytd-watch-flexy[full-bleed-player] #player.ytd-watch-flexy {
  display: none;
}

ytd-watch-flexy[full-bleed-player] .attached-message.ytd-watch-flexy:not(:empty) {
  margin-top: var(--ytd-margin-5x);
}

[WesselKroos]

This has now been fixed on Firefox and Opera. Edge and Chrome are in review. You can follow the release status here: https://github.com/WesselKroos/youtube-ambilight/issues/179