Comment puis-je intégrer un twitch.tv canal avec le chat sur un site?

Je fais une contraction page pour mon site, et j'ai besoin d'aide sur la façon de faire si il ya une twitch.tv joueur sur un côté, et de l'twitch.tv le chat de l'autre côté. J'ai essayé ceci:

<div align="left">
    <object type="application/x-shockwave-flash" height="500" width="900"     id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=clodbegamingnetwork" bgcolor="#000000">
        <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&channel=clodbegamingnetwork&auto_play=true&start_volume=25" />
    </object>

<div align="right">    
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/clodbegamingnetwork/chat?popout=" height="500" width="350">
    </iframe>
</div>

Mais il Ne marche pas. Il fait ceci:

http://prntscr.com/48xiuh

(J'ai un zoom arrière)

Donc personne ne corriger cela pour moi. Je n'arrive pas à comprendre comment cela pourrait fonctionner.

Exemple de la façon dont je voudrais que le allignment à regarder (ignorer le titre en bas de la contraction joueur):
http://prntscr.com/48xjj2

Merci!

InformationsquelleAutor theawesome67 | 2014-08-02
  1. 7

    À la fois la object et iframe les éléments sont positionnés comme block, ce qui signifie qu'ils sont la seule chose à l'aide de l'ensemble de l'espace dans une "ligne". Afin de permettre à deux éléments pour être côte-à-côte, vous pouvez envelopper le object dans un div puis faire:

    #object-div {
    float: left;
}

iframe {
    float: right;
}

    Ce faisant, ces deux éléments vont partager la même ligne. Vous pouvez aussi convertir ces block éléments de inline éléments en faisant:

    #object-div, iframe {
    display: inline-block;
}

    Mais que ne fonctionnent qu'à partir de IE8 et jusqu'.

    • Merci à vous pour que! Cela m'a vraiment aidé!
    • Si la réponse vous convient, merci de bien vouloir accepter ma réponse 🙂
    InformationsquelleAutor Patrick D'appollonio
  2. 1

    Je l'ai fait en fonction de vos réponses et a obtenu ce à travail!
    Mon code est le suivant...

    CSS

    #stream { width: 75%; float: left; }
#chat { width: 25%; float: right }

    HTML

    <section align="center">
        <h1>My LiveStream</h1>
    </section>
    <section>
        <div class="stream" align="center">
            <object type="application/x-shockwave-flash" height="500" width="900" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=clodbegamingnetwork"
            bgcolor="#000000">
                <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&channel=clodbegamingnetwork&auto_play=true&start_volume=25" />
            </object>

            <iframe frameborder="0" scrolling="no" src="http://twitch.tv/clodbegamingnetwork/chat?popout="  height="500" width="350">
            </iframe>
        </div>
    </section>
    InformationsquelleAutor Henrique Alho
  3. 1
    <iframe style="width: 620px; height: 378px;" scrolling="no" frameborder="0" src="twitch url here/embed"></iframe><iframe style="width: 350px; height: 379px;" scrolling="no" frameborder="0" src="twitch url here/chat?popout="></iframe>
<center>
        <a href="twitch url here?tt_medium=live_embed&tt_content=text_link" style="padding: 2px 0px 4px; width: 345px; font-size: 10px; font-weight: normal; text-decoration: underline; display: block;">Watch live video from (twitch user name here) on www.twitch.tv</a>
</center>

<iframe style="width: 620px; height: 378px;" scrolling="no" frameborder="0" src="twitch url here/embed"></iframe><iframe style="width: 350px; height: 379px;" scrolling="no" frameborder="0" src="twitch url here/chat?popout="></iframe>

    <a href="twitch url here?tt_medium=live_embed&tt_content=text_link" style="padding: 2px 0px 4px; width: 345px; font-size: 10px; font-weight: normal; text-decoration: underline; display: block;">Watch live video from (twitch user name here) on www.twitch.tv</a>

    InformationsquelleAutor user5048222