# Using Twitch player as a website background

**URL:** <https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193>\
**Category:** API\
**Created:** [December 23, 2018, 8:41pm UTC](https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193 "2018-12-23T20:41:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Glazbee](https://avatars.discourse-cdn.com/v4/letter/g/ecccb3/32.png) [@Glazbee](https://staging-discuss.dev.twitch.com/u/Glazbee)\
**Post date:** [December 23, 2018, 8:41pm UTC](https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193/1 "2018-12-23T20:41:26Z")

</div>

**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](https://ringvemedia.com/) || [Actual results](https://glazbee.com/tests/stackoverflow)

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.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [December 23, 2018, 8:48pm UTC](https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193/2 "2018-12-23T20:48:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Glazbee](https://avatars.discourse-cdn.com/v4/letter/g/ecccb3/32.png) [@Glazbee](https://staging-discuss.dev.twitch.com/u/Glazbee)\
**Post date:** [December 23, 2018, 8:49pm UTC](https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193/3 "2018-12-23T20:49:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [December 24, 2018, 10:40am UTC](https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193/4 "2018-12-24T10:40:08Z")

</div>

I repeat what I said.

Sounds like you are trying to cause:

 ![15](https://d2spem0quai2ol.cloudfront.net/original/2X/c/c198cbcbf34590f1eb6961951de2abe347a89f09.png)

or

 ![22](https://d2spem0quai2ol.cloudfront.net/original/2X/d/dd1caa68f492b60d1701a8e99613237ca283c820.png)

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

---

<div class="post-metadata">

**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\
**Post date:** [January 23, 2019, 10:40am UTC](https://staging-discuss.dev.twitch.com/t/using-twitch-player-as-a-website-background/19193/5 "2019-01-23T10:40:08Z")

</div>

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