+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Help | Adding video as background & rounded edges to all cards (/t-help-adding-video-as-background-rounded-edges-to-all-cards)
Help | Adding video as background & rounded edges to all cards - Sash - 2025-03-02
I have two questions
1. how can I add/link a custom video as a backdrop using css editor in settings?
2. how can I make the edge of there cards round across the entire pages? I have been trying to use custom poster images which have rounded corners and I want cardImageContainer & cardOverlayContainer to be rounded even when I add border-radius to them they don't load as rounded. It transitions from a square to the rounded when I browse.
Look at the corners of the card in this Video.
https://ibb.co/9mscZwJT
This is what I have so far.
Code:
/* Global square corners for desktop layout cards and overlays */
.layout-desktop .cardImageContainer,
.layout-desktop .cardOverlayContainer,
.layout-desktop .cardBox.visualCardBox,
.layout-desktop .cardBox.visualCardBox .cardScalable {
border-radius: 1em !important;
overflow: hidden;
}
/* Specific rules for lazy-loaded and default card images */
.layout-desktop .cardImageContainer.coveredImage img,
.layout-desktop .cardImageContainer.cardContent img {
border-radius: 1em !important;
object-fit: cover;
}
/* Page-specific adjustments for lazy-loaded cards */
.layout-desktop #homeTab .cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.layout-desktop #homeTab .cardImageContainer.coveredImage.cardContent.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast,
.layout-desktop #moviesTab .cardImageContainer.coveredImage.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.layout-desktop #moviesTab .cardOverlayContainer.itemAction,
.layout-desktop #tvRecommendedPage .cardImageContainer.coveredImage.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.layout-desktop #favoritesTab .cardImageContainer.coveredImage.cardContent.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast,
.layout-desktop #tvRecommendedPage .cardOverlayContainer.itemAction,
.layout-desktop #tvRecommendedPage .cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.layout-desktop #studiosTab .cardImageContainer.defaultCardBackground {
border-radius: 1em !important;
}I read this, but no information regarding adding a video as a backdrop, and I tried targetting cardImageContainer & cardOverlayContainer.
https://jellyfin.org/docs/general/clients/css-customization/#image-edge-rounded