Show a series of short video on your Twitch stream.

Drop in any .mp4 and it loops automatically. Point an OBS Browser Source at this project and you get a clean, full‑frame looping video. That's it.

Download this repo (green Code button → Download ZIP) and unzip it somewhere you'll remember.

Put your videos — downloaded reels, clips, or collection videos — into the reels folder as .mp4 files.

Comfortable with a terminal? There's a helper that downloads a video straight into reels/ for you — see Advanced: download with a script.

Open _settings.js in any text editor and list your file name(s):

const _settings = {
  videoFiles: [                   // the file(s) you put in the "reels" folder
    "Dancing-birds.mp4",
    // "second-clip.mp4",         // add more lines to play several in a row
  ],
  muted: false,                   // false = with sound, true = silent
  volume: 0.5,                    // loudness from 0 (silent) to 1 (full); 0.5 = 50%
  fit: "contain",                 // "contain" = whole video, "cover" = fill & crop
  backgroundColor: "#000000",     // or "transparent" to show your stream behind
};

• One file → it plays on a loop forever.
• Several files → they play in order, top to bottom, then start over from the first — a continuous reel.

The project ships with a default video, Dancing-birds.mp4, already listed here — so it plays the moment you open index.html.

In OBS: Sources → Add Source → Browser, then:

1. Tick Local file, click Browse, and choose this project's index.html.
2. Set the Width/Height to 800×800 — my recommendation.
3. Enable Control audio via OBS so the sound plays through your stream.
4. Click "Refresh cache of current page" & then "OK"

Your reel is now playing in OBS. 🎉

Note: Whenever you add a new video or change the list in _settings.js, OBS won't pick it up until you refresh the source — right‑click the Browser Source → Properties → Refresh cache of current page (or just right‑click → Refresh).

Prefer the terminal? Two npm commands handle videos for you. Install these tools first (all cross‑platform — macOS, Linux, Windows):

brew is macOS/Linux only — on Windows use winget (built in) or the download links above.

Saves a video straight into reels/ (works with Instagram, TikTok, YouTube, and hundreds of other sites):

The file is named automatically (e.g. video-04821.mp4). Add a second argument to name it yourself:

npm run download -- "https://www.instagram.com/reel/XXXXXXXXX/" "rick-roll"

After downloading, or any time you add or remove files in reels/ by hand, this rebuilds the videoFiles list in _settings.js from whatever's in the folder:

npm run reels