Aligning embedded chat and stream together with css

Sykikal

New Member
#1
I'm trying to embed a chat along with my twitch stream on a Xenforo (forum software) page. I want the stream to be 16:9 so it's HD, and I want it to adjust based on the user's resolution. Here's what I have so far to do that
Mã:
   <style>
    .twitch {I
    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>
There's just two problems.. The chat appears too high up, it isn't aligned with the streaming page. http://videogameinfo.net/forums/pages/stream/

The other problem is that there's too much empty space down at the bottom. I tried changing the chat wrapper to adjust the position, but even changing it to a 1 or something throws it way off and moves it too far down to the bottom. Hoping someone can help.
 

Admin

Administrator
Thành viên BQT
#2
You have issue because you have not proper HTML structure.

The below space is because you give lots of padding to chatwrapper class and chat class.
Just remove padding-bottom: 56.25%; from both class will remove your extra space.

And another issue: The chat appears too high up because you give iframe position:absolute; and it's top is 0. Change it to more approximately 300px;. like:
Mã:
.chat iframe {
    position: absolute;
    right: 0;
    top: 300px;
}
Hope it helps.
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top