Jellyfin customization using an nginx reverse proxy

README.md

Using nginx HTTP substitution module to customize Jellyfin.

1. Create /config/custom and place script.js and style.css in it
2. Edit nginx configuration to serve and inject the script

nginx.conf

location /custom {
  root /config;
  expires -1;
}

location / {
  sub_filter '<meta property="og:title" content="Jellyfin">' '<script defer src="/custom/script.js"></script>';
  sub_filter_once on;
  proxy_set_header Accept-Encoding "";
  
  # … rest of config
}

script.js

const style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('href', '/custom/style.css');
document.head.appendChild(style);

style.css

.videoOsdBottom .osdTextContainer,
.videoOsdBottom .osdPoster {
    display: none !important;
}
.videoOsdBottom {
    padding: 0 !important;
}
.osdControls .buttons {
    padding-top: 0 !important;
}
.headerTop {
    padding: .2rem 0 !important;
}
.buttons button {
    padding: .2rem;
}