Broadcast and OBS

The broadcast view is a full-screen draft overlay in the style of LCK and LCS broadcasts. It's made for streaming tools like OBS, and you can also just watch in it. Everything about it, including size, background, skins and sound, is set in its link, so one link reproduces your setup on any machine.

Opening the broadcast view#

Add view=broadcast to a draft link:

https://draftify.lol/draft/k3qz9wmp4?view=broadcast

Or, in the draft room:

• spectators can press Broadcast in the top bar (desktop);
• anyone can use Menu › Broadcast view. Drafters get it in a new tab, so they keep their seat.
• Menu › Broadcast view › Broadcast link copies the link with default settings, ready to paste into OBS. To change the background, skins, size or sound, open the view and copy the overlay link from its controls instead.

The view is built for desktop screens and stream capture, not phones. Opening it never takes a seat, and Exit goes back to the normal board.

Setting it up in OBS#

1. In a normal browser, open the broadcast view and set it up. Click anywhere on the page (or press Esc) to show the controls. Choose the background, skin, scale and sound, then press Copy overlay link.
2. In OBS, add a Browser source and paste the link as its URL.
3. Set Width to 1920 and Height to 1080, or to your canvas size if it's a different 16:9 size. See Sizing and scale.
4. Tick Control audio via OBS so the overlay's sound gets its own fader in the OBS audio mixer. Turn sound down or off there, or in the link (see Sound).
5. Leave Shutdown source when not visible unticked, so the overlay stays connected and doesn't reload every time you switch scenes.
6. Leave OBS's default Custom CSS as it is. It only makes the page background transparent.

Use one source for the whole series: the overlay follows the series to the next game by itself.

An OBS browser source has its own website storage, separate from your browser, so the overlay goes by what its link says. Settings you change in OBS's Interact window aren't saved to the source's URL and can be lost when it reloads. Make changes in a normal browser, copy the overlay link again, and paste it into the source's URL.

To bring up the controls inside OBS, right-click the source, choose Interact, and click the page or press Esc. The controls hide again after 3 seconds without the pointer on them, so they never end up on stream by accident.

Sizing and scale#

The overlay is designed as a 16:9 layout that always fits the page, so it looks the same at every size.

• Every size in the overlay (text, cards, bans, gaps) is measured in one unit: min(1vw, 1.78vh). That's 1% of the width of the largest 16:9 area that fits in the page.
• At 1920×1080 one unit is 19.2 px, exactly as designed. At 1280×720 everything is two-thirds the size, at 2560×1440 four-thirds, and at 3840×2160 double. The proportions are identical, so you can change resolution without moving anything else in your scene.
• Wider than 16:9 (ultrawide, such as 2560×1080 or 3440×1440): sizes follow the height. The bottom strip still spans the full width, and the pick cards get wider.
• Narrower than 16:9: sizes follow the width.

Scale (scale= in the link, or Display › Scale) makes the overlay's content bigger or smaller: 50, 75, 100 (default), 150 or 200 percent.

• It scales the pick strip, bans, timer line, caption, series bans and all their text.
• It doesn't scale the controls or the full-screen splash background.
• The layout keeps the full width: text, bans and the centre panel grow or shrink, and the pick cards share the width that's left.

Tips:

• Give the browser source the size it will appear at. The overlay lays itself out sharply at whatever size it's given. Stretching a smaller source in the OBS canvas only enlarges pixels and blurs text.
• If the overlay is too big or small for your scene, use scale= rather than resizing the source.
• For a 4K canvas, use a 3840×2160 source. It looks the same as 1080p, only sharper.

What's on screen#

• Bottom strip: five portrait pick cards per side, with Blue on the left and Red on the right. In the centre: the phase, team names and sides, the countdown with an arrow to the side on the clock, the game number, the mode and the patch. With Separate pick order, the side with first pick is marked 1st pick.
• Above the strip: a timer line in the colour of the side on the clock that shrinks toward the centre, plus both teams' bans. Phase 1 bans sit next to the centre and phase 2 bans at the outer edges.
• Selections: a champion being considered shows dimmed on its card, and the active slot pulses in its side's colour. Locked bans turn grey with a slash. An empty pick says No pick, and late-filled slots carry a LATE tag.
• Splash background (the default): the most recently locked champion's splash art fills the screen, with a caption naming the champion, slot and skin. While a drafter is choosing, it shows their selection and the caption reads Picking… or Banning….
• Phase text: Waiting for drafters, Waiting for ready, the ban and pick phases, Paused or Resuming in 3, Late selection or Undo window after the last pick, and Draft complete.
• Series bans (Fearless series): champions picked in earlier games, one row per game.

Backgrounds#

Skins#

The skin applies to the pick cards and the splash background. latest and random never show the base skin unless the champion has no other, and they skip chromas. The caption names the skin.

Series bans#

In a Fearless series the overlay shows series bans, the champions picked in earlier games, one row per game:

Sound#

The overlay plays the same sounds as the draft room: lock and ban effects, champion voice lines and champion-select music. Its sound settings are separate from the board's, and they're kept in the link so an OBS source plays exactly what the link says. Music is on by default here, unlike on the board.

1, true, 0 and false work too. OBS plays sound without a click; a normal browser tab needs one click on the page first.

Champion images#

All champion art comes live from Riot. Nothing is bundled, so new champions and skins appear without an update to Draftify.

Every image has fallbacks, so a missing file never leaves a hole:

• Pick cards: the skin's portrait, then the base portrait, then the centred splash, then CommunityDragon's copy. If a card's portrait hasn't loaded after 3 seconds, the card shows that skin's centred splash instead. A few skins' portraits are around 12 MB, against about 100 KB for the splash, so this matters with latest and random on slow connections.
• Splash background: the skin's centred splash, then its full splash, then the base skin's, then CommunityDragon's. The background downloads out of sight and fades in only once it has fully loaded, so it never draws in from top to bottom. If it takes more than 3 seconds, it shows while still downloading.
• Icons: Data Dragon's icon for the draft's patch, then CommunityDragon's.

The champion list and icons use the patch that was current when the draft was created, so every game of a series sees the same pool. The overlay needs to reach ddragon.leagueoflegends.com (and, for fallbacks, communitydragon.org).

Following the series#

Use one overlay link for the whole series. When a later game's draft starts, the overlay moves to that game and keeps all its settings. Between games it keeps showing the finished draft.

When Draftify releases an update, the overlay reloads itself only between games (in a lobby or after a finished draft), never in the middle of one.

Roles#

If the series has role confirmation on, drafters' roles stay hidden during the draft, from the overlay too. When the game completes:

• each pick card shows its role icon next to its slot label;
• each team's cards are reordered Top, Jungle, Mid, Bot, Support. Picks without a role fill the remaining positions in pick order.

Role placeholders (a display option) is separate: it shows lane icons in pick cards that are still empty, in the order Top, Jungle, Mid, Bot, Support.

drafter.lol links#

Overlay links made for drafter.lol work on Draftify too:

• stream=true opens the broadcast view with a transparent background;
• layout=lck opens the broadcast view;
• preferences= is read as drafter.lol's display preferences.

preferences= is a string of 1s and 0s, one per setting, in this order. Missing positions keep their defaults. The Display menu edits these and keeps the link drafter.lol-compatible.

All link options#

Example: a transparent overlay at 75% with the newest skins and no music:

https://draftify.lol/draft/k3qz9wmp4?view=broadcast&bg=transparent&scale=75&skin=latest&music=off

Want your own design instead? See Overlay data.