I'm in the process of integrating a chat feature with my Twitch stream on a Xenforo forum page. I aim for the stream to be displayed in 16:9 aspect ratio to ensure high definition quality, and I want it to adapt to the user's screen resolution. Below is the code I have developed for this purpose:
<style>
.twitch {
position: left;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 30px;
overflow: hidden;
}
.twitch iframe {
position: absolute;
top: 0;
left: 0;
}
.chat {
position: right;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
}
.chat iframe {
position: absolute;
top: 0;
right: 0;
}
.twitchWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.twitchWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 70%;
}
.chatWrapper {
position: top;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 50px;
height: 0;
}
.chatWrapper iframe {
position: top;
top: 25;
right: 8;
width: 29.5%;
height: 35%;
}
</style>
<div class="twitchWrapper">
<div class="twitch">
<iframe frameborder="0" scrolling="no" src="http://www.twitch.tv/Sykikal/embed"></iframe>
</div>
</div>
<div class="chatWrapper">
<div class="chat">
<iframe frameborder="0" scrolling="no" src="http://www.videogameinfo.net/forums/chat/popup"></iframe>
</div>
</div>
However, there are two issues that need addressing. The first problem is that the chat box appears too high on the page, not aligning properly with the streaming section. You can view the issue here:
The second challenge is the excess space at the bottom of the display. Despite attempting to adjust the chat wrapper positioning, changing it even slightly causes the chat box to shift too far down the page. Any assistance in resolving these issues would be greatly appreciated.