Question

我正在尝试嵌入youtube实时视频窗口和实时聊天，使其像在youtube live上一样彼此相邻。现在，聊天出现在视频窗口下方，并且对如何对齐此代码感到困惑：

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class='embed-container'>
  <iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class='embed-container'>
  <iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>

Answer 1

我正在尝试嵌入youtube实时视频窗口和实时聊天，使其彼此相邻显示

根据您的措辞，我想您是视频和聊天并排的内容。

我个人能想到的最短的解决方案是使用Flexbox，而您的HTML代码保持不变。

body{
  display: flex;
  flex-direction: row;
}
.embed-container{
  flex: 0 0 50%;

}
iframe{
  width: 100%;
}

<div class="embed-container">
  <iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>
<div class='embed-container'>
  <iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>

如何将此特定代码分为几部分

1 个答案: