Html 如何在网站上嵌入带有聊天功能的 twitch.tv 频道？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25099507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I embed a twitch.tv channel with chat on a site?
提问by theawesome67
I am making a twitch page for my site, and I need help on how to make it so there is a twitch.tv player on one side, and the twitch.tv chat on the other side. I tried this:
我正在为我的网站制作一个 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>
But it Doesnt work. It does this:
但它不起作用。它这样做：
(I zoomed out)
（我缩小了）
So does anyone fix this for me. I can't seem to figure out how this would work.
有没有人帮我解决这个问题。我似乎无法弄清楚这将如何工作。
Example of how I would like the allignment to look (ignore the title at the bottom of the twitch player): http://prntscr.com/48xjj2
我希望对齐方式的示例（忽略抽搐播放器底部的标题）：http: //prntscr.com/48xjj2
Thanks!
谢谢！
回答by Patrick D'appollonio
Both the objectand iframeelements are positioned as block, meaning that they're the only thing using the entire space in a "line". In order to allow two elements to be side-by-side, you could wrap the objectin a divand then do:
无论是object和iframe元素被定位为block，这意味着他们在“线”使用整个空间的唯一的事。为了允许两个元素并排，您可以将objecta包裹起来div，然后执行以下操作：
#object-div {
float: left;
}
iframe {
float: right;
}
By doing so, both elements will share the same line. You could also convert those blockelements to inlineelements by doing:
通过这样做，两个元素将共享同一行。您还可以通过执行以下操作将这些block元素转换为inline元素：
#object-div, iframe {
display: inline-block;
}
But that will only work from IE8 and up.
回答by user5048222
<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>
回答by Henrique Alho
I did this based on your answers and got this to work! My code is the following...
我根据你的回答做了这个，并让它起作用了！我的代码如下...
CSS
CSS
#stream { width: 75%; float: left; }
#chat { width: 25%; float: right }
HTML
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>
