[HTML][CSS][JavaScript]Problem z dopasowaniem apletu twitch + czat do wielkości okna przeglądarki Opcje

[stivi]

Witam. Posiadam następujący problem z którym walczę już trochę czasu i ręce mi opadają...

Sprawa wygląda tak. Mam sobie na stronie wrzucony taki kodzik [fragment]:

[HTML] pobierz, plaintext 
		<div class="twitch">
 
                        <object id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=drollercaster" type="application/x-shockwave-flash" width="1280" height="720">
                        <param name="allowFullScreen" value="true" />
                        <param name="allowScriptAccess" value="always" />
                        <param name="allowNetworking" value="all" />
                        <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
                        <param name="flashvars" value="hostname=www.twitch.tv&amp;channel=drollercaster&amp;auto_play=true&amp;start_volume=25" />
                    </object>
 
 
            <iframe frameborder="0"
                    scrolling="no"
                    id="chat_embed"
                    src="http://twitch.tv/chat/embed?channel=drollercaster&amp;popout_chat=true"
                    height="720"
                    width="335">
            </iframe>
 
 
		</div>
[HTML] pobierz, plaintext 

a tutaj fragment cssa

[HTML] pobierz, plaintext 
.twitch {
    position: relative;
    margin: 0;
    text-align: center;
}
[HTML] pobierz, plaintext 

W efekcie nam daje to takie coś:
(IMG:http://i.imgur.com/KrXcfzC.png)

Jednak po zjechaniu wielkości okna przeglądarki (mniejsza rozdzielczość) robi się takie coś:
(IMG:http://i.imgur.com/SGFtvdt.png)

W czym tkwi problem? Chodzi mi o to żeby po zmniejszeniu okna przeglądarki aplet playera twitcha oraz chat przeskalowały się do rozmiaru okna, natomiast samo okno czatu nie zjeżdżało wiersz w dół. Swoją drogą z niewiadomych przyczyn okno czatu pojawia się kilka px niżej niż okno playera (wtf?).

Byłbym wdzięczny za podanie rozwiązania wraz z łopatologicznym wytłumaczeniem by na przyszłość wiedzieć takie rzeczy.

[PrinceOfPersia]

Spróbuj dać w CSS wielkość w procentach (zamiast w pikselach) zarówno do object, jak i do iframe.
albo możesz użyć CSS media queries i ustalić inne rozmiary elementów dla różnych rozdzielczości, np:

Kod

@media screen and (max-width:1024px) {
  #live_embed_player_flash {  
    width:30%;
  }
}

Ten post edytował PrinceOfPersia 9.03.2014, 09:35:17