如何在网站上嵌入带有聊天功能的 twitch.tv 频道？答案

【问题标题】：How can I embed a twitch.tv channel with chat on a site?如何在网站上嵌入带有聊天功能的 twitch.tv 频道？
【发布时间】：2014-08-02 21:18:59
【问题描述】：

我正在为我的网站制作一个 twitch 页面，我需要有关如何制作它的帮助，以便一侧有 twitch.tv 播放器，另一侧有 twitch.tv 聊天。我试过这个：

<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>

但它不起作用。它这样做：

http://prntscr.com/48xiuh

（我缩小了）

有没有人帮我解决这个问题。我似乎无法弄清楚这是如何工作的。

我希望对齐方式的示例（忽略 twitch 播放器底部的标题）： http://prntscr.com/48xjj2

谢谢！

【问题讨论】：

标签： html alignment embed twitch

【解决方案1】：

object 和iframe 元素都定位为block，这意味着它们是唯一在“行”中使用整个空间的元素。为了让两个元素并排放置，您可以将 object 包装在 div 中，然后执行以下操作：

#object-div {
    float: left;
}

iframe {
    float: right;
}

这样做，两个元素将共享同一行。您还可以通过以下方式将这些 block 元素转换为 inline 元素：

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

但是will only work from IE8 and up。

【讨论】：

谢谢你！真的很有帮助！
如果答案对你有用，请接受我的回答:)

【解决方案2】：

我根据您的回答做了这件事，并得到了这个工作！我的代码如下...

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>

【讨论】：

【解决方案3】：

<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>

【讨论】：