Skip to content

Instantly share code, notes, and snippets.

@acropup
Last active December 31, 2020 20:14
Show Gist options
  • Save acropup/a726c1841336bf9c71f485d71526ea09 to your computer and use it in GitHub Desktop.
Save acropup/a726c1841336bf9c71f485d71526ea09 to your computer and use it in GitHub Desktop.
Show 4 lines of title text for videos on youtube homepage. See the following repo where this and other YouTube UI improvements is made into a UserStyle CSS script: https://github.com/acropup/acropup-UserStyle-CSS-Scripts#YouTube-UI-Refinements
/* Set height of video's text info */
div#details {
height: 11rem;
}
ytd-rich-item-renderer.ytd-rich-grid-renderer {
margin-bottom: 24px;
}
/* Move ellipsis menu to bottom left corner */
ytd-menu-renderer.ytd-rich-grid-video-renderer {
margin-top: 9rem;
}
/* No vertical margin on video titles */
h3.ytd-rich-grid-video-renderer {
margin: 0;
}
/* Let content overlap with ellipsis menu column */
#meta.ytd-rich-grid-video-renderer {
padding-right: 0px;
}
/* Chanel name and view count, bottom right */
ytd-video-meta-block.grid.ytd-rich-grid-video-renderer {
position: absolute;
left: 42px;
right: 0;
bottom: 0;
}
/* Channel icon, bottom left */
a#avatar-link {
position: absolute;
bottom: 0px;
left: 0px;
}
/* Show up to 4 lines of title text before truncating with ellipsis */
#video-title.yt-simple-endpoint.style-scope.ytd-rich-grid-video-renderer {
font-size: 1.4rem;
line-height: 1.8rem;
max-height: 7rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment