Bootstrap, two responsive iframes, next to each other

Question

I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.

I have this code HTML:

<div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-md-offset-1 nopadding">
                    <div id="player">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 nopadding">
                    <div id="chat">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-md-offset-1"></div>    
</div>

CSS:

.nopadding {
padding: 0 !important; }

I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.

The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?

Answer 1

You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.

Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo

Html:

<div class="container-fluid">
  <div class="row player-section">
    <div class="col-sm-6 no-padding">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
      </div>
    </div>
    <div class="chat-wrapper">
      <iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
    </div>
  </div>
</div>

Css:

.no-padding{
  padding:0;
}
iframe{
  border:none;
}
.player-section{
  position:relative;
 }
.chat-wrapper{
  position:absolute;
  left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
  width:100%;
  height:100%;
}
@media screen and (max-width:767px){
  .chat-wrapper{position:relative;height:300px;left:0;}
}