Question

我已经尝试了几天来解决这个问题;但显然这比预期的复杂得多。

我想要实现的目标：我希望两个iframe都能使用屏幕的整个高度和宽度。我已经能够让iframe使用完整的高度使得div将视频封闭在css上100％的高度。但我似乎无法使用全宽度。

在此之后我面临一个新问题，聊天iframe正在移动到视频iframe之下。

感谢您的耐心等待！

这是我的代码。

body {
  font-family: 'Gloria Hallelujah';
  font-weight: 300;
}
.jumbotron {
  display: flex;
  align-items: center;
  background-image: url('jumbobg.png');
  background-size: cover;
  color: #ffffff;
  text-shadow: 0.25px 0.25px 0.25px #000000;
  padding: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
.twitchVideo {
  width: 100%;
  height: 100%;
}
.twitchChat {} 
.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.nomargin {
  margin: 0 !important;
  padding: 0 !important;
}

<html>

<head>
  <title>....</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="twitch.css">
</head>

<body>
  <section class="jumbotron ">
    <div class="container nomargin">
      <div class="row">
        <div class="twitchVideo embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.twitch.tv/?channel=lirik" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="twitchChat">
          <iframe class="embed-responsive-item" src="https://www.twitch.tv/lirik/chat?popout=" frameborder="0" scrolling="no"></iframe>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

内容未在jumbotron

0 个答案: