If you have ever wanted to embed your stream and chat on a personal website, then you already know that the Twitch provided code leaves a lot to be desired. A couple of iframes with set height and width doesn’t exactly lend itself to an enjoyable viewing experience. You are left choosing between spending a couple hours fiddling with it trying to get things to work just right, or saying “good enough” and hoping your viewers don’t hate you for it.

In an effort to simplify the whole process I put together a short CSS stylesheet that allows you to easily drop in your Twitch stream/chat on any page with just a little copying and pasting.

The main feature of the stylesheet is that it maintains your stream at a 16:9 ratio regardless of the page width. It also positions the chat right next to your stream and hides it when things get a little too tight. The whole thing is self contained in a wrapper that will conform to the element you place it within.

Here’s the github repo featuring the code and a sample implementation. github.com/gregle/embedTwitchCSS

All you need to do is download the embedTwitchCSS.css stylesheet and copy the elements onto your page like in the sample.

...
<link rel="stylesheet" href="**YOUR-FILE-STRUCTURE**/embedTwitchCSS.css" />
...

...
<div class="twitchWrapper">
  <div class="twitchStream">
    <iframe src="https://player.twitch.tv/?channel=**YOUR-CHANNEL-NAME**" width="300" height="150" frameborder="0" scrolling="no"></iframe>
  </div>
  <div class="twitchChat">
    <iframe src="https://www.twitch.tv/**YOUR-CHANNEL-NAME**/chat" width="300" height="150" frameborder="0" scrolling="no"></iframe>
  </div>
</div>
...

The default setting is to give the stream 75% and the chat 25% of the width and to hide the chat when the page width is less than 1024px. I highly recommend tweaking those three values to properly fit your site’s particular needs.

The code itself is fairly straightforward and lends itself to modification. The only one I’d stay away from messing with is the padding-top on the twitchStream. That percentage, 56.25%, is what maintains the 16:9 ratio. Otherwise you will end up with black bars around your stream.

Hopefully this little stylesheet saves you some time and at the very least it gives you a starting point.