Do you want to stream your chess sessions live and are wondering how to embed a chess.com game in OBS without using a browser window? Here are several solutions on how to do that.

Embed a chess.com game in OBS without a messy browser window

Embedding a chess game using a browser window can be annoying, because…

• if you resize the window, you mess up your whole layout in OBS
• you may have to adjust your window each time you start OBS
• often, OBS just forgets your source and you have to re-enter it (which can be very annoying if you notice mid-stream)
• anonymity: it’s of course easier prevent accidentally sharing private or personal data if you’re not using a browser, being logged into your chess account there (let alone using your standard browser during streaming, which I never recommend)

However, it also has a few advantages, as in…

• you can demonstrate what you do more directly, e.g. go backwards in the game
• you can point to things using your cursor which is unavailable in a direct browser source vs. a window capture (where you can enable or disable this feature)
• you can switch between games faster by directly navigating towards a game in the browser

Keep that in mind, because implementing a chess.com game without running it in a browser will remove all of these features and make it harder for you to actually showcase your game. However, if you have a special game going on, you don’t want to switch games a lot during your stream, and the issues that come with using a browser just annoy you, then here is an alternative (and further down, also a compromise solution) for you.

In the spirit of open source on this blog, I also wanted to redirect you to lichess.org, by the way, a great platform especially for puzzles, analyses and tactical training – and it’s completely free.

Solution 1: Embed a chess game in OBS without a browser window using a browser source

In OBS, any website can be embedded as a browser source. It has nothing to do with your browser, as you use it on your system. Instead, OBS emulates the browser, as in: it parses the website and adds the output to your stream. This, the site will be show just like it would appear to a fresh public viewer. That means, such embedding usually comes with giant annoying cookie banners – an issue that also exists on chess.com of course. However, these can be removed, if you’re okay with playing dirty.

1. Embed the source in OBS

On chess.com, every game has a unique number, the game ID. Depending on what type of game it is, those IDs can vary. It also seems like ongoing bot games can not be implemented this way sadly at the point in time when I am writing this article… But your mileage may vary.

The easiest way to get the game ID is to just click on the little share button on your chess.com game in the lower right corner and copy the number or whole URL.

Now add a browser source to the sources list and enter the game URL.

Make sure to set the size to something tall, like 1920 px in height.

2. Crop the source

Usually this can be done using a Alt+Mouse Click on the border. But if you are using Linux like me, and Alt+Left-Clicking moves your whole window (as in xfce), then you can select the embedded browser source in the preview window or Sources list and press Ctrl+E. The source mustn’t be locked for this. Ctrl+E opens the Transformation settings. (Also possible: (a) Right-click on the source → Transformation → Edit Settings, or (b) if you have a Windows Key and Linux: Alt+Windows Key+Left mouse can crop by dragging the border – or just create your own hotkey!). Perform the desired crop there (bonus tip: PgUp / PgDwn in the crop selector is faster than clicking around) and be happy!

3. Enjoy the result

After you’ve cropped off everything you don’t need, add a cute frame, if you like one. This is what it looks like for me (yes, my ELO is below 1000, no I do not care, no I don’t want to become a chess streamer, yes, I am just implementing chess games to kill time while talking about a lot of things unrelated to chess, and yup, I like the basic layout).

Solution 2: Create a custom local HTML file featuring the game you want to stream

Now, if you just really don’t like the idea of cropping of the cookie banner, you can circumvent that issue by creating your own local HTML file and sourcing that as a local browser source in OBS. Within such a file, you can use the iframe-embedding script provided by chess.com (or the below minimal example). It’s fairly straight-forward and eliminates the cookie-banner altogether. However, it does not allow a custom size chess field. The result looks like this:

Create a HTML file using this simple code, just add [YOUR GAME ID] below. This is the code (or similar) you get from chess.com, if you use the share button and then select “embed”.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 200px 0 0 0;
            padding: 0;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 100vh;
            border: none;
        }
    </style>
</head>
<body>
    <iframe src="https://www.chess.com/emboard?id=[YOUR GAME ID]" allowtransparency="true"></iframe>
</body>
</html>

This option is a very minimal version using the chess.com embedding script. However, I do not recommend that for streaming. It’s better to use a large layout (see my example above), because many users watch Twitch etc. on mobile and the chess board will be very small then, and resizing isn’t possible with this option.

If you want to, you can also implement this source directly into OBS as a browser source. Just use the URL type "https://www.chess.com/emboard?id=[YOUR GAME ID]". This option, as well as the above code, does work with bot games.

Solution 3: Browser use, but with minimal resizing issues

I’ve presented you with 2 possibilities, but there’s also an option, to just use your browser, but with minimal size issues.

The chess layout of a game on chess.com is always the same, whether you play rapid, long-game or a bot. Thus, for the purpose of sharing such a game, the only problem would be if you navigate somewhere else on the chess.com site and then your cropped window shows an awkward dark gray cutout but not the actual game. Well, thus you need to use your brain before you do that – there is really no other way.

You can however create multiple scenes for that purpose and adapt each to the size of the area of your browser you want to show.

• You should also maximize your browser, that way you can rely on a fixed window size for cropping. If you move the window and it resizes, no problem: just maximize it again and your layout won’t be affected.
• Open links using the “open in new tab” (or Ctrl+Left Click) option, because that way, the tab will open in the background (unless you have a really basic browser or idiotic settings going on) and will also not disturb your embedded cropped window capture featuring the chess game.
• Put OBS to “always on top” mode (I am not sure, windows users have that option, I am using debian and I honestly don’t care about people who are using a macro virus for an operating system). That way, you can manage both OBS and your browser, without having to click back and forth a lot for scene switches. On xfce debian, I like to use the “roll up window” option to leave OBS on top but accessibe. The other docs, especially the scene switcher, stay visible. That way, I see the whole window I am working on, even if I just use a single laptop monitor (which I do, for all of my live streams).

Conclusion

So, if you’re not interested in streaming multiple games at once and switching between those games fast, the browser source option might be for you. It for sure is a nice way to just play the game without even worrying about what you do in your browser window (or with said window).

However, the best option, if you want to take streaming your chess games more seriously would be sharing a browser window. Make sure to be aware of privacy aspects and use a designated browser for streaming anything. Using some the tips provided in this article will help you keep resizing issues while streaming to a minimum.

PS. I am using solution 1 if I want to stream a specific game that is going on live, like with a friend that agreed to do that with me on stream, or a rapid game maybe. For everything else, I’d always prefer to set up themes using a browser window. Just make sure you only capture that very window and not your whole screen (for privacy reasons), and switch scenes if you need to. You can simply set up multiple browser windows of the same instance and switch between those as, e.g. you go from an analysis to a board view or change platforms (like going from chess.com to lichess.org).

♟️ Last but not least, follow me on chess.com and on lichess.org!