If you’ve tried other solutions that haven’t worked, this page has a live, working example to show that this one does. Click here to scroll down and see.

If you’ve got your own Twitch channel and also run your own WordPress or Joomla website too, you may want to add/embed your Twitch streaming cam to your website, or you may simply want to embed someone else’s stream. In other words, this applies if you want to add ANY Twitch stream to your website.

There are various ways of doing this but not all of them are adaptive and responsive. This can cause problems for viewers with different-sized screens on desktop and mobile devices. So, here’s a quick and easy guide on how to do it. Basically, what we need to do is add some CSS to our website and then use a “container” to place an “iframe” in.

If you don’t know what that means, don’t worry, just use the code in this article. If you run a WordPress website, then your Theme will normally have a place to copy and paste the custom CSS. For Joomla, your Template should have the same function. If you’re unsure where to find these, you may have to ask the theme/template creator where they are located.

Alternatively, just search on the internet for your theme’s name together with “add custom CSS” and you should hopefully find out where the option is. Although there are various “aspect ratios” you can use, we’ve gone for the 16:9 option below. If you don’t know what that means, don’t worry. Just try it out for yourself and test the results.

Here’s the CSS to add:

.twitch-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.twitch-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

In your WordPress page/post or your Joomla article, add the container code below. Note: you’ll need to add this in the “code” of the page/article, not in the standard WSIWYG editor. Don’t forget to replace yourchannelname with the actual name of your channel and yourwebsite.com (or www.yourwebsite.com) with your website’s URL.

Now add this to your article

For WordPress, you can add this in a “custom HTML” Gutenberg block. One word of caution though – pay attention to the “&” symbol in the code below because (depending on how you edit your WordPress pages) it may automatically change to “&” when you save and revisit the page editor.

<div class="twitch-container"><iframe class="twitch-responsive-iframe" src="https://player.twitch.tv/?channel=yourchannelname&parent=yourwebsite.com"></iframe></div>

Here’s an example of the end result

It doesn’t matter if you’re viewing this page on a PC, tablet or mobile phone and whether your screen is portrait or landscape – even the size of the screen doesn’t matter. In other words, the video is fully responsive on all devices.

​Other options

With Twitch, it isn’t just the cam you can embed, you can also embed saved videos and the chat section too. For more information on the other options available, visit this page of Twitch’s website. For other ways to tweak aspect ratios together with a variety of different customisation options, visit this page for more details.