<style>
.twitch-wrapper{
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.twitch-wrapper iframe.player{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
<div class="twitch-wrapper">
<iframe class="player" width="620" height="378" src="https://player.twitch.tv/?channel=ryozukii" frameborder="0" allowfullscreen="true" scrolling="no"></iframe>
</div>
<style>
.twitch-wrapper{
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.twitch-wrapper iframe.player{
position: absolute;
width: 70%;
height: 100%;
top: 0;
left: 0;
}
.twitch-wrapper iframe.chat{
position: absolute;
width: 30%;
height: 100%;
top: 0;
right: 0;
}
</style>
<div class="twitch-wrapper">
<iframe class="player" width="620" height="378" src="https://player.twitch.tv/?channel=ryozukii" frameborder="0" allowfullscreen="true" scrolling="no"></iframe>
<iframe class="chat" src="https://www.twitch.tv/ryozukii/chat?popout=" frameborder="0" scrolling="no" width="350" height="500"></iframe>
</div>
Like that @Learath2 ? (edited)
.twitch-wrapper{
position: relative;
width: 100%;
padding-bottom: 42.1875%;
}
.twitch-wrapper iframe.player{
position: absolute;
width: 75%;
height: 100%;
top: 0;
left: 0;
}
.twitch-wrapper iframe.chat{
position: absolute;
width: 25%;
height: 100%;
top: 0;
right: 0;
}
@media screen and (max-width:768px){
.twitch-wrapper{
padding-bottom: 56.25%;
}
.twitch-wrapper iframe.chat{
display: none;
}
.twitch-wrapper iframe.player{
width: 100%;
}
}
