[Tutorial] How to change the "Emby" title (in the browser tab)?

[ertagon2 44]

Introduction:

Okay, so as we are all well aware (or maybe it's just me) the Emby title that appears in the browser's tab is very difficult to change. The only way to change it is to edit some files but they  reset with updates, making it a real pain to change them every time. And good luck changing the title if you are using Docker to run Emby Server.

Here is a quick tutorial on how I changed it, without having to mess with any files (kind of).

Requirements:
    - NGINX
    - Emby Server (duh)
    - You own original title

Instructions:

1.  You want to be running NGINX reverse proxy for the Emby Server. There are already resources out there on how to set it up so I am only providing the absolute basics here. 

   server {
   
       # Listens on port 443 IPv6 with http2 and ssl enabled
       listen [::]:443 ssl http2;
       # Listens on port 443 IPv4 with http2 and ssl enabled
       listen 443 ssl http2;
       # Sends data as fast as it can not buffering large chunks.
       proxy_buffering off;
   
       # enter your service name and domain name here example subdomain.domain.com
       server_name subdomain.domain.com;
   
       # For all requestes, "/" is essentially the root of your domain (or subdomain)
       # subdomain.domain.com/
       location / {
           # Enter the IP and port of the backend emby server here.
           proxy_pass http://127.0.0.1:8096;
       }
   }

    

2.   Now let's replace some HTML. We will do this by using sub_filter inside the location. 

   location / {
       # Enter the IP and port of the backend Emby Server here.
       proxy_pass http://127.0.0.1:8096;
   
       # Change title
       sub_filter '<title>Emby</title>' '<title>New Title</title>';
   }

   This however will only replace the title for a brief second while the page is loading. Once it loads it will change the title on its own.
    
3. To fix this we have to inject our own JavaScript code that will change it back to what we want. 

   location / {
       # Enter the IP and port of the backend emby server here.
       proxy_pass http://127.0.0.1:8096;
   
       # Change title
       sub_filter '<title>Emby</title>' '<title>New Title</title>';
       sub_filter '</head>' '<script>document.title="New Title",new MutationObserver(function(t){"Emby"==document.title&&(document.title="New Title")}).observe(document.querySelector("title"),{subtree:!0,characterData:!0,childList:!0});</script></head>';
   }

   We are essentially attaching a new <script></script> to the end of the </head> that contains an event listener that will run a function whenever the title is changed.
   
   The script checks if the title is "Emby" and changes it to whatever you want. It does so because if the title is the name of the library e.g. "Movies" then we want to keep it, but if you want your own title at all times then simply do this.

   location / {
       # Enter the IP and port of the backend emby server here.
       proxy_pass http://127.0.0.1:8096;
   
       # Change title
       sub_filter '<title>Emby</title>' '<title>New Title</title>';
       sub_filter '</head>' '<script>document.title="New Title",new MutationObserver(function(t){document.title="New Title"}).observe(document.querySelector("title"),{subtree:!0,characterData:!0,childList:!0});</script></head>';
   }

    

4. Voila! Now your browser tab will have the title of your choosing.

Edited May 25, 2022 by ertagon2
Made code cleaner.