This userstyle allows you to modify what appears on the screen after the video has finished playing.
Youtube - endscreen config by procyon-b
Details
Authorprocyon-b
LicenseNo License
Categorywww.youtube.com
Created
Updated
Code size2.9 kB
Code checksum1cfdc277
Statistics
Learn how we calculate statistics in the FAQ.
Total views119
Total installs170
Weekly installs9
Weekly updates13
Description
Notes
You can choose between hiding the "grid" (the 3 thumbnails) and display nothing, or hide the grid and display the "old" endscreen, the screen filled with thumbnails (4 x 3 or 3 x 3).
Other options applied to the endscreen are :
- "Show all endscreen text" which display the text on all thumbnails when the mouse is move toward the border of the player area.
- "Add background to text" : when moving your mouse over a thumbnail, a darcker background is place behind the text to make it more readable.
- "Show full text on over" : if the title of the video is longer than the available space, it will show the rest.
- "Set scallable font size" : Apply a font-size to the text proportinal to the size of the thumbnail (more readable). In fullscreen mode and in theater mode (added 0.9.1). And optionally in all player's mode (added 0.9.2)
List all Youtube fixes
Source code
/* ==UserStyle==
@name Youtube - endscreen config
@namespace github.com/Procyon-b
@version 0.9.2
@description Fine tune youtube player endscreen
@author Achernar
@preprocessor stylus
@var checkbox hGrid 'Hide grid' 0
@var checkbox hGridsES 'Hide grid & show endscreen' 1
@var checkbox ES 'Show all endscreen text' 1
@var checkbox ESa 'Add background to text' 1
@var checkbox ESh 'Show full text on over' 1
@var checkbox fontSz 'Set scallable font size (fullscreen, theater)' 1
@var checkbox fontSzP ' in all player sizes' 0
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
if hGrid || hGridsES {
.html5-video-player.ended-mode.ytp-fullscreen-grid-active .ytp-fullscreen-grid,
.html5-video-player.ended-mode.ytp-fullscreen-grid-active .ytp-gradient-bottom {
display: none !important;
}}
if hGridsES {
.html5-video-player.ended-mode.ytp-fullscreen-grid-active .html5-endscreen {
display: block !important;
}
.html5-video-player.ytp-fullscreen.ended-mode.ytp-autonav-endscreen-cancelled-state .html5-endscreen {
top: 48px !important;
}
/*show title and bottom on endscreen*/
.html5-video-player.ended-mode :is(.ytp-title,.ytp-title-text) {
display: initial !important;
}
.html5-video-player.ended-mode :is(.ytp-title,.ytp-chrome-bottom) {
opacity: 1 !important;
}
/* :hover "endscreen" displays all titles */
if (ES) {
div.html5-endscreen:hover > .ytp-endscreen-content:not(:hover) .ytp-videowall-still-info-content {
opacity: 1;
}}
if (ESa) {
div.html5-endscreen:hover > .ytp-endscreen-content:not(:hover) .ytp-videowall-still-info-content :is(.ytp-videowall-still-info-title, .ytp-videowall-still-info-author) {
background: rgba(0, 0, 0, 0.5);
}
.ytp-endscreen-content:hover .ytp-videowall-still-info-content .ytp-videowall-still-info-title:hover,
.ytp-endscreen-content:hover .ytp-videowall-still-info-content .ytp-videowall-still-info-author:hover {
background: rgba(0, 0, 0, 0.5);
}
}
if ESh {
.ytp-endscreen-content:hover .ytp-videowall-still-info-content .ytp-videowall-still-info-title:hover,
.ytp-endscreen-content:hover .ytp-videowall-still-info-content .ytp-videowall-still-info-author:hover {
max-height: unset !important;
}}
/* restore endscreen adaptable font size 20250914 */
if fontSz {
$ftsAll = ':not(.ytp-delhi-modern:not(.ytp-fullscreen))'
if (fontSzP) { $ftsAll = '' }
.html5-video-player{$ftsAll} .ytp-videowall-still-info-content .ytp-videowall-still-info-title,
ytd-watch-flexy[theater] .html5-video-player .ytp-videowall-still-info-content .ytp-videowall-still-info-title {
max-height: 2.5em;
}
.html5-video-player{$ftsAll} .ytp-videowall-still-info-content,
ytd-watch-flexy[theater] .html5-video-player .ytp-videowall-still-info-content {
font-size: 1vw;
}
}
}
}