Support for shorts

[nirgranth]

[nirgranth]

If Using deep dark for YouTube use ` /Background for the entire page/ html, ytd-browse, ytd-watch, ytd-search, ytd-app, ytd-app[is-watch-page], [class*="ytd-watch-flexy"]:not(#engagement-panel-scrim), .style-scope.ytd-page-manager.hide-skeleton, .account-container { background-color: transparent !important; }

/*Background for shorts*/
#shorts-container
{
    background-color: var(--main-background) !important;
}

#shorts-inner-container
{
    background-color: transparent !important;
}

/*on shorts - so here is filled by default, thus above I am using main-color instead to keep it consistent*/
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled > div > yt-icon > svg > g > path
{
    fill: var(--main-color) !important;
}

/*2022 Nov changes*/
/*subscribe button*/
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,  /*NOTE: this affects other material buttons - I would say desired effect*/
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover, /*on shorts*/
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal, .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal:hover, /*on shorts*/
.ytp-sb-subscribe, a.ytp-sb-subscribe /*in cards... why yt why*/
{
    background-color: var(--second-background) !important;
    border-color: var(--second-background) !important;
    box-shadow: var(--shadow) !important;
    color: var(--main-text) !important;
}

/*Toast notification hover*/
yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover
{
    background-color: var(--main-background) !important;
}
if join-color /*overwriting the above*/
{
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"]
    {
        background-color: var(--main-color) !important;
        border-color: var(--main-color) !important;
    }
}
if subscribe-color /*overwriting the above*/
{
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
    .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover, /*on shorts*/
    .ytp-sb-subscribe, a.ytp-sb-subscribe /*in cards*/
    {
        background-color: var(--main-color) !important;
        border-color: var(--main-color) !important;
    }
}

/* progress bar */
.html5-video-player:not(.ytp-color-party) .html5-play-progress,
.html5-video-player:not(.ytp-color-party) .ytp-play-progress,
.progress-bar-played.ytd-progress-bar-line /* on shorts*/
{
    background: var(--main-color) !important;
}

/*shorts comments background*/
.watch-while-engagement-panel.ytd-reel-video-renderer, /*comment window background*/
ytd-item-section-renderer[static-comments-header] #header.ytd-item-section-renderer /*add comment background*/
{
    background-color: var(--second-background) !important;
}

`

[WesselKroos]

I have no intention to support shorts at the moment because the shorts video player is quite different from the standaard video player. This requires a lot of rework to the current implementation.

Because:

• Every short is a separate video tag (instead of the single video tag in the standard player). This makes it hard (but not impossible) to listen for play/pause/load events.
• The short video player has no settings menu. The current ambient light settings menu is based on the standard video player settings menu.
• The shorts page layout is different from the standaard player layout. So this requires extra support for the styling of those elements.

But there is still a chance that I will re-evaluate shorts support when YouTube ever removes or restyles their standard video player layout and/or video player settings menu.

That being said. The rework for shorts has a lot of similarities with the rework required to support multiple video sites in general. So, there might also be a scenario where I create a more generic ambient light extension that supports multiple video sites. But I can't promise that I ever will.

PS: There are also extensions that redirect shorts links to the standard video player. For example: Youtube Shorts to Normal player

[nirgranth]

Thanks I never thought about redirecting them. I always used to do this manually But I guess you lose the algo for the next recommendation