How to embed a responsive, full-width Twitch cam on your website

 How to embed your Twitch channel's cam into your website so that it's responsive, full-width or fullscreen

If you've got your own Twitch channel and also run your own website too, you may want to add/embed your Twitch streaming cam 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 not sure where to find these, you may have to ask the theme/template creator to find out 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:

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.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 with your website's URL.

 

Now add this to your article (in the code section) 

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

 

Here's an example of the end result

 

 

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.