SPOTLIGHT - Trailers on the homepage

[SethBacon]

SPOTLIGHT
     Trailers on the Jellyfin Homepage

Spotlight helps you rediscover your collection by playing trailers fetched from your libraries' metadata — creating a living, evolving homepage slideshow that highlights Your media.




But why?

Jellyfin tracks trailer metadata for media, but the links are available only on the media's info page. This script displays the trailers inline on the homepage. Hopefully, this reminds you of the great titles in your collection and gets you interested in watching them, as the trailers are designed to do. Choice paralysis becomes very real for your users once you get hundreds/thousands of options, and I've found the trailers really help remind you of old gems, or discover new favorites!

This project was initiated by Bob (https://github.com/BobHasNoSoul) and I in  November 2023 Since then some folks have tried their hand at implementations but I haven't found any that displayed trailers in the prominent way I'd envisioned. 

So why isnt this a proper plugin? Confusingly; Plugins cannot alter the function of Jellyfin-web so were left to do this via injection, the unauthorized way. Come, lets be bad..
Its my true hope that this kind of functionality could be rolled into Jellyfin proper, someday.

How Spotlight works

- Dynamic discoveries  
  Spotlight searches your library for a random movie or series (configurable in the HTML file). If the item has a background image and a logo, it creates a slide. 
  When a movie or series has a trailer linked in its metadata, Spotlight fetches and embeds that YouTube trailer directly on the slide.
  It can also read from a static list of media in list.txt (more below)

- Trailer aspect ratio detection
  Spotlight uses noembed to determine each trailer’s true aspect ratio. The container is dynamically resized to minimize letterboxing and pillarboxing, showing as much video area in teh frame as possible. (Hard-coded black bars on the yt video itself cannot be clipped.)

- Cinematic YouTube playback
  Trailers are embedded using YouTube’s minimal player configuration:
  - Auto-plays without overlays.
  - Suppresses most UI elements for a cleaner presentation.
  - Starts at moderate volume (50% by default).

- Automatic transitions  
  After a trailer finishes, Spotlight automatically loads the next slide. If no trailer is available, a static slide is shown (default duration: 10 seconds, configurable in HTML).

- Detailed metadata overlays  
  Each slide includes:
  - Year of release.
  - Duration (minutes for movies, seasons for series).
  - Ratings (community and critic, where available).
  - Logo (if available) and **backdrop** image.
  - Plot summary at the bottom.

- Access-aware randomization or custom lists  
  Media items can be pre-defined in a list.txt file. If absent, Spotlight selects random items from the user’s accessible library (respecting profile restrictions, ie. it cannot serve content a user is unable to access).





🛠️ Windows Installation

1. Create a UI folder inside your \Server\jellyfin-web\ directory. 
2. Place spotlight.html and spotlight.css inside that folder.

3. In your \Server\jellyfin-web\ directory, find the file named home-html.~random-characters~.chunk.js and edit it.
  Paste the following snippet after "...movie,series,book">":

<style>
  .spotlightiframe {
    width: 99.5vw;
    height: 63vh;
    display: block;
    border: 0px solid #000;
    margin: -65px auto -50px auto;
  }
</style>
<iframe class="spotlightiframe" src="/web/UI/spotlight.html" tabindex="0"></iframe>


4. Save your modefied chunk.js file, hard-reload your Jellyfin homepage (Ctrl + Shift + R) and enjoy!

---

📝 Notes

- Trailers are not loaded if the device width is below 700px

- The script goes to great lengths to maximize video size, but if YouTube videos have hard-coded letterbox or pillarbox bars, they cannot be clipped.

- The script ensures the YouTube player stops when navigating away from the page. However, due to Jellyfin’s SPA architecture, using the browser "back" button may not fully reload the page, and slides may appear without video. Using Jellyfin’s Home button or refreshing the homepage restores trailer playback.

- Certain youtube videos are not allowed to be played off-site, the fail is noted in console, and those slides will revert to image only

- Several variables can be adjusted around line 100 in spotlight.html:
  - moviesSeriesBoth = 3 — (1 = movies only, 2 = series only, 3 = both)
  - shuffleInterval = 10000 — time (ms) between static slide changes without video
  - useTrailers = true — set to false to disable trailers

- You can change the hardcoded fallbackColors to adjust the colors of the buttons, or the frame will inherit colors from your CSS if it is MD3 compatible eg. [GNAT](https://github.com/JSethCreates/jellyfin...-sethstyle)

- My ultimate goal is to support local trailers stored on your server, eliminating the need for YouTube. While planned, this feature is not included in this release.





🗒️ Using a list.txt file

If you'd like to manually control which media items Spotlight displays, you can provide a list.txt file.

- Create a text file named list.txt and place it in the same UI folder as spotlight.html and spotlight.css.
- Each line of the file should contain a single Jellyfin item ID. 
- Spotlight will exclusively select items listed in this file, in order. 
- If list.txt is absent or empty, Spotlight will automatically fall back to picking random items from the user's accessible library.

How to find item IDs

To find a media item's ID:

1. Navigate to the item in your Jellyfin web interface.
2. Copy the URL from your browser — the item ID is the long string after /details/. 
  Example: 

  "http://localhost:8096/web/index.html#/details?id=66c39f275a415478171ccd911de550c9&serverId=d0bc182015b64c0ebe491b72839266c7"

  Here, the ID is 66c39f275a415478171ccd911de550c9.

Example list.txt

Happy Fathers Day!              This first line is picked as the list title (but not currently used)
4a05a2baa566acb6ea1de8edb75a56d6 This right-side text is ignored by the script so you can label items
8c4a181803702a61cc48072bd5113fb6 Copy these item IDs out of the Media item page address
496528765c9937932301a1590752a7f4 If a user doesnt have access to an item it will skip
c3c48cb8a80c0b5172e8470966a10381 The Shining
5f5c9047099065f639213d29471a5b19 There Will be Blood
1e178c7db16ff20bdad078a2b94780b7 World's Greatest Dad

When list.txt is present, only these items will be included in the Spotlight slideshow (with trailers and metadata, if available).



Screenshots feature Seths GNAT CSS, Seths Spotlight, & Seths UI mod (coming soon)

[Cronus]

Love it. Tried deploying it to the tizen jellyfin client without much luck though .

[KodiUser1138]

That looks cool. Does it only work with YouTube linked trailers in metadata? (Almost) all of my movies have local trailers stored in the respective media folders following standard naming conventions.

Are you able to currate the list of movies you want to showcare? Wasn't quite sure when I skimmed through.

My only real issue is having 28 drives for my movies which I prefer to have spun down when not actually needed and this likely wants to spin everything up for direct access. But still very cool addition.

[SethBacon]

Hey KodiUser, you're on the right track: Yes, if we used local trailers it would request from one of your (28‽ lol) hd's, but as it currently runs; it accesses the images from your media cache, which you probably have set to your jellyfin directory (otherwise you'd notice your drives would spin up when you access a media details page). 

Curating a list is very possible. See the "Using a List' section in big bold letters up there   

Local trailers are an option in development, but Im curiousr, how do you get all your trailers? Is there a jellyfin plugin? I wasn't really satisfied with the trailer URLs TinyMediaManager was returning to my .nfos. A lot of them had loud pre-rolls for the trailer host, or were restricted to being watched only on youtube so i built a new tool - TrailHound!

[Druidblack]

There is a good app for downloading trailers. https://github.com/nandyalu/trailarr

[KodiUser1138]

Hey KodiUser, you're on the right track: Yes, if we used local trailers it would request from one of your (28‽ lol) hd's, but as it currently runs; it accesses the images from your media cache, which you probably have set to your jellyfin directory (otherwise you'd notice your drives would spin up when you access a media details page). 

Curating a list is very possible. See the "Using a List' section in big bold letters up there   

Local trailers are an option in development, but Im curiousr, how do you get all your trailers? Is there a jellyfin plugin? I wasn't really satisfied with the trailer URLs TinyMediaManager was returning to my .nfos. A lot of them had loud pre-rolls for the trailer host, or were restricted to being watched only on youtube so i built a new tool - TrailHound!

In my now near 1.5 decades of home media server 'fun' I've gone through many itterations on how to have things set up. Started just ripping movies and tossing them onto a drive to then individual directories as random dumps, storing local metadata/images, sorting to specific alphabetic folders and so on. I now maintain my movies on 28 hard drives, one for each alphabet letts plus one for 'DVD' movies which are any not full HD Blu-ray type rips and lastly one for my special collection of Spielberg and Star Wars films just because I'm a nerd like that.

At some point along the way I realized you could have local trailers so I began a big project of obtaining the best main trailer I could for every single movie in my library (sans things like documentaries, concerts etc if they weren't readily available). That was back when I had maybe 2800-3000 movies? Now I'm closing in on 7000 movies and I'd say maybe 15 don't have any trailer associated with them. Most notibly is Turner and Hooch, for unknown reasons.

YouTube has been almost the exclusive provider for trailers and I've just used a downloader app or website to obtain a local copy. I then bring that into Premiere to ensure uniformity for size, audio levels and other tweaks if required. Export and there you go. It's amazing how 3 trailers for 1 film on the same studiou YouTube site can vary so greatly in their quality. I then keep additioonal trailers if I find them in an Extras subfolder (including a duplicate of the main trailer).

Right now I know JEllyfin plays local trailers directly from the local media folder.I've long been trying to figure out how to have both JF and Kodi not look into local folders when scrolling my libraries just to keep drives from randomly spinning up. I know both pull the locally saved photos into a cache folder and 'should' use that for reference when just browsing the library. Right now neither pull in the local trailers though, which is currently good because I don't have a hard drive with enough space to hold7000+ trailers haha. 

But this addition to JF looks really cool. I've gone plain vanilla JF since I began using it a few years back as I didn't (and still don't, really) want to invest hundreds of hours more into customizing JF the way I did with my very custom Kodi skin. But lately I've looked at a few cool theme options so I've been wondering. I looked at the video backgrounds app which automatically makes them for all your media but that has the same issues as the trailers, requires pulling directly from the saved folders, and that means 24TB drives spinning just to play a tiny video. I'm just a single solo person trying to figure this all out with a modest to sometimes zero budget. I'm not Netflix let alone Amazon rich haha. But I like to see these sorts of ideas and look into how they work, provide some feedback if I feel and then go from there. And the JF community has been super open and welcoming which is awesome! Just hope some of my wish list items might be worked in someday!

---

Oh as an addition to all the above, I am wonderig if there is a spot/button/area to select the currently showing item to go to it's direct media page? Like if UP shows up and I don't want to play it but I'd like to check it out am I able to do that? On thing I've put a requestin for is in the dashboard where you can see what media users are currently watching there isn't a direct way to access that specific media entry page. Instead youhave to go through your library's normal channels, which is annoying. Just an idea if it's not already there (and can be).

[KodiUser1138]

One more thought. Could you make the trailer screen come up below your media libraries bar? I think that might look better and give quicker access to those libraries. But just a spitball idea.