📺 Retro YouTube TV — 90s TV Guide Edition

A black-plastic 1990s television whose home screen is a Prevue / TV-Guide Channel style interface: a live YouTube video preview window up top and an auto-scrolling program listings grid below. Tune to a channel to watch it full-screen, complete with a 90s channel banner.

Live: https://josh99smith.github.io/josh99smith-retroYoutubeTV/

Features

• 📼 Chunky 90s black-plastic cabinet (FUNTRON "STEREO · COLOR"), speaker grille, power LED
• 🗂️ TV-Guide channel: scrolling blue listings grid + live preview window + promo panel + on-screen clock
• 👆 Tap any show in the guide to watch it (auto-scroll pauses while you browse)
• 🟢 90s green OSD: chunky channel display + segmented volume bar
• 📺 Full-screen watch mode with a translucent channel "bug" and a ‹ GUIDE chip to go back
• 🔇 Mobile-friendly tap-to-unmute prompt (video autoplays muted)
• 🔢 Direct channel entry — type a channel number on the keyboard
• 📡 Static distortion on channel change (burst + rolling glitch bar + jitter)
• 📺 NO SIGNAL color-bars fallback for any non-embeddable video
• 🔌 CRT power-off animation, scanlines, curved-glass glare
• 🖥️ Full-screen / cinema mode (Fullscreen API + CSS fallback for iOS)
• ♿ Keyboard-accessible (focus styles, role=button rows) + prefers-reduced-motion support
• ⌨️ Keys: P power · F full screen · ↑/↓ channel · ←/→ volume · M mute · digits = channel · G guide · Enter watch

Run it

It's a static site — no build step. Just serve the folder:

# Python (built in)
python3 -m http.server 8000

# or Node
npx serve .

Then open http://localhost:8000.

YouTube's IFrame player requires being served over http:// (or https://), so use a local server rather than opening index.html directly with file://.

Customize channels

Each channel is a real top YouTube channel, played via its uploads playlist, so a channel shows a rotating feed of that creator's actual videos (latest first) — MrBeast, NASA, Nat Geo, TED, Lofi Girl, Cocomelon, and more. Edit the CHANNELS array at the top of app.js:

const CHANNELS = [
  { num: 2, name: "MR BEAST", ch: "UCX6OQ3DkcsbYNE6H8uQQuVA", cat: "ENTERTAINMENT" },
  // add your own { num, name, ch: "UC…channel id", cat } ...
];

ch is the channel's UC… ID (from its channel URL); the app converts it to the UU… uploads playlist automatically. Channels whose videos block embedding show a NO SIGNAL card and auto-surf to the next one while watching.

Tech

Plain HTML, CSS, and vanilla JavaScript using the YouTube IFrame Player API. No frameworks, no dependencies.