Using Twitch player as a website background

The Problem

I’m looking to create a full-screen background using a Twitch VOD/Live channel. Currently, at various view width/height configurations the player does not scale, instead showing black bars. Looking into the individual elements, this seems like something that I potentially cannot fix due to the elements being embedded in an iframe.

The Code

My current CSS implementation

.twitchWrapper {
    position: relative;
    height: 100%;
    display: grid;

#twitchStream {
    height: 100%;
    margin: auto;
    opacity: 0.8;

#twitchStream iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;

And my current HTML implementation

<div class=twitchWrapper">
	<script src= ""></script>
	<div id="twitchStream"></div>
	<script type="text/javascript">
		var options = {
    		width: 0,
    		height: 0,
    		channel: "shroud", 
    		controls: false
		var player = new Twitch.Player("twitchStream", options);

The expected/vs actual results

Expected results || Actual results

You may notice how in the expected results the image seems to scale with the screen, no matter the view/width. That’s what I’d like to achieve.

Thanks in advance.

So you want to fit the video to width/height and chop off what doesn’t fit, rather than fitting the video to the screen so nothing is lost?

Sorry Barry, i noticed my post isn’t very informative. I’m going to read through and edit it accordingly.

I repeat what I said.

Sounds like you are trying to cause:


Where the Twitch Player/embed is trying to keep the whole video in view at all times instead

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.