Using Twitch player as a website background

API
1

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 {
    width:100%;
    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= "https://player.twitch.tv/js/embed/v1.js"></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);
		player.setVolume(0);
	</script>
</div>

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.

2

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?

3

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

4

I repeat what I said.

Sounds like you are trying to cause:

15
151508×552 560 KB

or

22
22722×848 580 KB

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