SmartTV / XBOX Style YouTube with TV-UI on PC / Steamdeck with Gamepad

Short URL to this documentation: https://is.gd/youtube_tv_ui

Info

This is about the "YouTube on TV" interface to the default YouTube website (like SmartTVs use it - LG, Samsung, PS5, ...)

Benefits:

• Game Controller support, good for a TV as second screen or SteamDeck (instructions below)
• YouTube App: stream to a device, will show this "YouTube on TV" as possible TV target, see: https://support.google.com/youtube/answer/7640706

Drawbacks:

• Max quality is based on screensize and navigator string
• Playback halts and controler won't work, when the 'YouTube on TV' loses window focus (so don't use it while working on your PC)

Summary

1. Install a separate browser and needed extensions + configure
2. Let the browser automatically create a WebApp (Why? see 6.4.2 below)
3. Add it to Steam to enable controller support
4. Edit the controller profile

how to

1. install Chromium / Ungoogled Chromium

   • NOTE: for fullscreen to work, the used browser MUST NOT BE already opened on start with the required arguments, so we install a separate browser (everything here works the same for Google Chrome)
   • Ungoogled Chromium: to be able install or download extensions from the chrome webstore
     • How to Manually Install Extensions
     • Chromium Web Store Extension

2. install extensions

   • Youtube TV On PC
     • NOTE: allows us opening the TV version url (the one used by any SmartTV and XBOX)
     • https://chromewebstore.google.com/detail/youtube-tv-on-pc/jldjbkccldgbegjpggphaeikombjmnkh
     • SEE High-Quality playback fix below
   • Tampermonkey
     • NOTE: allows us to add a refresh for the youtube url because 'Youtube TV On PC' loads to late after bowser start
     • NOTE: allows us to hide the mouse cursor
     • https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
     • ⚠️ ENABLE USERSCRIPTS: https://www.tampermonkey.net/faq.php#Q209
   • Youtube Playback Speed Control
     • NOTE: the speed controls are not available in the UIs options, so we use this to be able to use the controller to change the speed
     • https://chromewebstore.google.com/detail/youtube-playback-speed-co/hdannnflhlmdablckfkjpleikpphncik
   • Optional
     • uBlock Origin Lite (AdBlock causes issues)
     • YouTube NonStop
       • https://chromewebstore.google.com/detail/youtube-nonstop/nlkaejimjacpillmajjnopmpbkbnocid
       • does not ask if you are still there (also helps when using autoplay)
     • Auto Quality for YouTube^TM
       • https://chromewebstore.google.com/detail/auto-quality-for-youtube/iaddfgegjgjelgkanamleadckkpnjpjc
       • enforces quality setting
       • is sometimes able to set quality to somehting that is highter then in the quality selection

3. open https://www.youtube.com/tv

   • NOTE: will redirect to the normal youtube page, if the extension "Youtube TV On PC" is missing

4. click on the browsers app menu (3 vertical dots) > click on "Stream, save and share" > "install page as app"

   • creates a desktop icon, I will reference it as [YT_LINK] below
   • NOTE: Do this before youtube is done redirecting, the url still must be /tv
   • NOTE: Do NOT login yet
   • Windows save location If you need the Link later: C:\Users\%USERNAME%\AppData\Local\Chromium\User Data\Default\Web Applications

5. right click the desktop icon [YT_LINK]

   1. open the properties, copy the --app-id=... part

6. open Steam
   Note: Steam is needed to translate Gamepad actions into the required Keyboard button presses and for SteamDeck (open desktop mode to add)

   1. "Add Game" (bottom left)
   2. add Chromium
      • Windows: add C:\Program Files\Chromium\Application\chrome.exe
        • NOTE: we need to use chrome.exe (not chrome_proxy.exe) to make the fullscreen param work
      • Linux / SteamDeck: Chromium (Flatpak) or Ungoogled Chromium (Flatpak)
        • it should look something like flatpak 'run' '--command=/app/bin/chromium' 'com.github.Eloston.UngoogledChromium' '--profile-directory=Default'
        • the params in #4 need to go after these
   3. right click the created game entry, properties
      1. change the link "start arguments"
         • use the [YT_LINK] properties, mainly add the app-id
           • --app-id=<YOUR_[YT_LINK]_APP-ID_HERE>
         • you could use --app=https://youtube.com/tv instead of --app-id, but:
           • the cache would be shared with the chromium browser tabs (and login will be cleared if you clear the browser history / you could use another profile --- but this way, it stays in the app's specific cache and remembers the login)
           • you would not get access to the extensions and options button in the title bar
      2. add other params to look like
         • --profile-directory=Default --start-maximized --start-fullscreen
      3. add optional params
         • to set the startup screen: --window-position=<leftpos>,<toppos> (you need to get the values, not on wayland I think)
           • e.g. --window-position=-1282,0 for a screen left of the primary
           • NOTE: To figure out this value, you can open any browser window, move the window to the right position and maximize it, then open DevTools and enter window.top.screenLeft in the console
         • it is possible to use --user-data-dir=... instead of --profile-directory=Default to have it save all app related data (cache, cookies, ...) to a specific folder (Flatpak: mind the restrictions)
         • There is also --window-size=<width>,<height> for setting the correct resolution on SteamDeck's Gaming Mode due to interface scaling (SteamDeck resolution: 1280 * 800 )
         • --app-launch-url-for-shortcuts-menu-item=<url> can be used to add a pre-launch url to wait for browser extensions to load (delayed extension loading)
           • --app-launch-url-for-shortcuts-menu-item="javascript:setTimeout(_=>location='https://youtube.com/tv',3000)" to delay the loading by 1000ms (1s)
         • --force-device-scale-factor=1.5 -- just as a Note, since YouTube usually scales by itself
   4. select "controller"
      NOTE: Controller must be connected for the config button to show up

      1. add a gamepad profile from vdf below (howto: gamepad config files)

      2. OR add a new profile (XBox Controller style):

         Button	action
         A	Enter {select}
         B	Escape {back, do NOT use numblock STOP because it would NOT close menus and overlays and only leave the current video}
         X	PLAY {Numblock - Play button, K would be immediate pause but not resume}
         Y	{would be search on XBOX, I don't know the key for it}
         LB	H {previous video, you could use numblock NEXT}
         RB	[ (german key position: Ü) {next video, you could use numblock PREV}
         Menu left	F5 (normal), F11 (long press) {reload, toggle fullscreen}
         Menu right	action: Show Keyboard (normal)

         Stick R	action
         Left	- {minus for "Playback speed control"}
         Right	+ {plus for "Playback speed control"}
         press	action: volume up

         • Stick R to directional cross, Overlap 0

         Stick L	action
         up	UP {keyboard key} (enable Turbo, repeat rate 250 ms)
         ...	...
         press	action: volume down

         • Stick L to directional cross, Overlap 0

         Cross	action
         up	UP {keyboard key} (enable Turbo, repeat rate 250 ms)
         ...	...

         Trigger	action
         LT	LEFT {keyboard key} (enable Turbo, repeat rate 100 ms -- to be able to trigger fast forward)
         RT	RIGHT {keyboard key} (enable Turbo, repeat rate 100 ms -- to be able to trigger fast forward)

      3. change the artwork

         1. download the image for the YouTube on TV steam tile (I like the one from "YouTube TV" service):
            • 
         2. right click the created game entry, select change userdefined artwork (properties), and use the saved image

7. delete the [YT_LINK] file

   • NOTE: not needed anymore, we needed the WebApp params to configure steam

8. click the tempermonkey extension in chromium, while on the youtube link

   • click the extensions button in the top bar (SteamDeck: do this in Desktop Mode)
   • NOTE: when the browser opens, the "Youtube TV On PC" extension does not trigger at the right moment (reloading the page quickly will make it kick in, due to delayed extension loading)
   • NOTE: when not in fullscreen when loading the page, the youtube player will not show the max video quality (reloading the page fixes this)
   1. "create new userscript" and save

      // ==UserScript==
      // @name         YouTube/TV reload
      // @namespace    http://tampermonkey.net/
      // @version      2025-05-19
      // @description  reload the Youtube page
      // @author       BananaAcid
      // @match        https://www.youtube.com/tv*
      // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
      // @grant        none
      // @source       https://gist.github.com/BananaAcid/a23844d757a41833ea540d73283cecf9
      // @run-at       document-end
      // ==/UserScript==
      
      (function() {
          'use strict';
      
          localStorage.YTV_REFRESH_COUNTER = localStorage.YTV_REFRESH_COUNTER ?? 0;
      
          if (document.querySelector('body > .content-container[role=alert]')) {
              document.querySelector('body > .content-container[role=alert] > .header[role=contentinfo]').innerHTML = 'Loading extensions';
              document.querySelector('body > .content-container[role=alert] > .footer[role=contentinfo]').innerHTML = 'Please wait, until the browser extensions are ready. The interface will load automatically.';
      
              localStorage.YTV_REFRESH_COUNTER++;
      
              setTimeout(_ => {
                  document.location.reload();
              }, localStorage.YTV_REFRESH_COUNTER < 3 ? 100: 3000);
          }
          else {
              localStorage.removeItem('YTV_REFRESH_COUNTER');
          }
      
      })();

   2. create a second userscript

      // ==UserScript==
      // @name         Hide Cursor
      // @namespace    http://tampermonkey.net/
      // @version      2025-05-19
      // @description  hides the cursor when not used
      // @author       BananaAcid
      // @match        https://www.youtube.com/tv*
      // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
      // @grant        none
      // @source       https://gist.github.com/BananaAcid/a23844d757a41833ea540d73283cecf9
      // ==/UserScript==
      
      (function() {
          'use strict';
      
          //console.log('Hide Cursor');
          (function() {
              let inactivityTimeoutId;
              const HIDE_TIMEOUT_MS = 3000; // 3 seconds
      
              function hideCursor() {
                  document.body.style.cursor = 'none';
                  //console.log('Cursor hidden');
              }
      
              function showCursor() {
                  document.body.style.cursor = 'auto';
                  //console.log('Cursor shown');
              }
      
              function resetInactivityTimer() {
                  clearTimeout(inactivityTimeoutId);
                  showCursor();
                  inactivityTimeoutId = setTimeout(hideCursor, HIDE_TIMEOUT_MS);
                  //console.log('Timer reset, will hide in ' + HIDE_TIMEOUT_MS + 'ms');
              }
      
              document.addEventListener('mousemove', resetInactivityTimer);
              document.addEventListener('mousedown', resetInactivityTimer);
              document.addEventListener('touchstart', resetInactivityTimer);
              resetInactivityTimer();
          })();
      })();

      • if it is used on steamdeck, use document.body.style.cursor = 'none'; directly below 'use strict' and remove the rest
   3. click on the tempermonky extension, overview > turn the new userscript ON

9. Now only start it through steam to have the controller work and LOGIN the first time

   • NOTE: The "Exit Youtube" button will not work due to Chromium 88+ security restrictions