Featured Content Bar

Thanks to SethBacon (Video integration)
BobHasNoSoul (Original architect)
MakD (Mobile Styling)

1. Download spotlight.html and List.txt. Go to your jellyfin-web folder (C:\Program Files\Jellyfin\Server\jellyfin-web) and create a folder named ui and drop spotlight.html and List.txt in that folder

Show screenshots

2. Important: Open Notepad with Administrator rights, or use Notepad++ for this In the jellyfin-web folder, open the file home-html.RANDOMSTRINGHERE.chunk.js. Replace everything with this code

Show code

"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[8372], {
  5939: function(a, e, t) {
    t.r(e),
    e.default = `
    <div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book">
      <style>
        .featurediframe {width: 95vw; height: 23.5em; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 0em; margin-top: 1em;}
		@media (min-width: 3158px) {.featurediframe {height: 50em;} }
		@media (min-width: 2601px) and (max-width: 3157px) {.featurediframe {height: 33em;} }
		@media (min-width: 2000px) and (max-width: 2600px) {.featurediframe {height: 27em; font-size: 133%;} .layout-desktop #homeTab .sections.homeSectionsContainer {margin-top: -3em !important;} }
		@media (max-width: 1000px) and (orientation: portrait) {.featurediframe {height: 25em; margin-bottom: -3em;} }
		@media (max-width: 1000px) and (orientation: landscape) {.featurediframe {height: 26em; margin-bottom: -7em;} }
		@media (max-width: 400px) and (orientation: portrait) {.featurediframe {height: 45vh; margin-bottom: 0em;} }
		@media (max-height: 400px) and (orientation: landscape) {.featurediframe {height: 100vh;} }
		@media screen and (aspect-ratio: 4/3) {.featurediframe {height: 25em;} }
		@media screen and (aspect-ratio: 3/4) {.featurediframe {height: 25em; margin-bottom: -5em;} }
		@media screen and (aspect-ratio: 16/10) and (max-height: 1200px) {.featurediframe {height: 34em; margin-bottom: -5em;} }
		@media screen and (aspect-ratio: 10/16) and (max-height: 1280px) {.featurediframe {height: 25em; margin-bottom: -5em;} }
		@media (min-aspect-ratio: 21/9) and (min-width: 3000px) {.featurediframe { height: 50em;} }
      </style>
      <div class="tabContent pageTabContent" id="homeTab" data-index="0"><iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe><div class="sections"></div></div><div class="tabContent pageTabContent" id="favoritesTab" data-index="1"> <div class="sections"></div></div></div>`;}}]);
document.addEventListener("DOMContentLoaded", () => {
  const homeTab = document.getElementById("homeTab");
  const spotlightIframe = homeTab.querySelector(".featurediframe");

  const observer = new MutationObserver(() => {
  const isHomeTabActive = homeTab.classList.contains("is-active");
    spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
  });
  observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
});

3. Save the file. Empty your browser's cached web content (Ctrl+F5 or empty it from your browser's Cookies and Site Data settings section)

Show screenshot

How to feature content in the bar (List.txt)

To preselect content, edit List.txt in the ui folder and paste the ID of each piece of content to be featured (IDs can be found in the address bar).

IMPORTANT If you use List.txt to preselect content and a User has an Age Rating limit on their account (U, PG etc) make sure you add content for them to see too, or it will just be blank (content above their Age Limit is hidden to them)

If it is empty below line 1, the bar will feature content at random.

Desktop View

Mobile View (Landscape / Portrait)

Mobile View, but on Desktop-sized screens

Show guide

Same as above, except open this link and download the file spotlight.html (don't just save the link, it'll save the github page)

Fullscreen Version

Show guide

Open this link and download the file spotlight.html (don't just save the link, it'll save the github page)

And use this version of home-html.chunk.js

And add this to your Custom CSS Box in the Jellyfin Dashboard

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/Jellyfin-Featured-Content-Bar@main/fullscreen/fullscreenspotlight.css");

Linux installation

Show guide

1. Create the ui Directory

sudo mkdir -p /usr/share/jellyfin/web/ui

2. Download your spotlight.html and List.txt files (make sure you edited them, as above) and then copy them to the new "ui" folder

sudo cp /local/path/to/spotlight.html /usr/share/jellyfin/web/ui/

3. Add the relevant script to home-html.chunk.js

sudo nano /usr/share/jellyfin/web/home-html.chunk.js

4. Ensure the ui folder & spotlight.html are readable by Jellyfin

sudo chown -R jellyfin:jellyfin /usr/share/jellyfin/web/ui

sudo chmod -R 755 /usr/share/jellyfin/web/ui

5. Restart Jellyfin

sudo systemctl restart jellyfin

6. Clear Browser Cache

Make sure to clear your browser cache to load the updated home-html.chunk.js & spotlight.html

Docker installation

Show guide

1. Create the ui Directory (assuming your container is named jellyfin)

docker exec -u 0 jellyfin mkdir  /jellyfin/jellyfin-web/ui

2. Copy your downloaded spotlight.html and List.txt files to the new "ui" folder (don't forget to edit them, as above)

docker cp spotlight.html jellyfin:/jellyfin/jellyfin-web/ui/

3. Add the relevant code line to the home-html..chunk.js file

Since I'm not aware of a way to edit the file directly in the container, I just created the file outside and copied it back in once I edited it:

docker cp jellyfin:/jellyfin/jellyfin-web/home-html.<numbers>.chunk.js .

and then you can add the relevant code line to the file (see step 6 above)

nano home-html.<numbers>.chunk.js

4. Copy the file back to the container

docker cp home-html.<numbers>.chunk.js jellyfin:/jellyfin/jellyfin-web/

5. Clear Browser Cache; if it doesn't work instantly, restart the container

docker restart jellyfin

⚠️ Disabling X-Frame-Options DENY in your Reverse Proxy

Show guide

When using a reverse proxy like Nginx or Caddy, the X-Frame-Options: DENY header can block iframes, preventing the feature

Solution

Nginx

1. Open your site's configuration:

   sudo nano /etc/nginx/sites-available/your-site.conf

2. Modify or add the following directive:
   • To disable:

      # add_header X-Frame-Options "DENY";

   • To allow iframes from the same origin:

     add_header X-Frame-Options "SAMEORIGIN";

3. Restart Nginx:

   sudo systemctl restart nginx

Caddy

1. Modify the /etc/caddy/Caddyfile:

   • To disable:

     header -X-Frame-Options

   • To allow:

     header X-Frame-Options "SAMEORIGIN"

2. Restart Caddy:

   sudo systemctl restart caddy

Uninstallation

Open home-html.RANDOMSTRINGHERE.chunk.js and replace everything with this

"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[8372],{5939:function(a,e,t){t.r(e),e.default='<div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book"> <div class="tabContent pageTabContent" id="homeTab" data-index="0"> <div class="sections"></div> </div> <div class="tabContent pageTabContent" id="favoritesTab" data-index="1"> <div class="sections"></div> </div> </div> '}}]);