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.