Bootstrap, два ответных фрейма, рядом друг с другом

Question

Я хотел бы иметь твич-плеер с чатом на моем сайте. Мне нужно, чтобы он был отзывчивым. Я работаю с Bootstrap.

У меня есть этот код 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; } 

Я использую этот CSS, чтобы удалить прокладку из сетки, мне нужно иметь плеер и общаться рядом друг с другом , без заполнения.

Проблема в том, что чат мал, ровно высота слишком мала. Я могу установить высоту в css, но эта высота не изменится с высотой игрока. Как я могу это исправить?

Answer 1

Вы можете сделать это, установив абсолютную обертку чата и затем установив внутри нее iframe ширину и высоту 100% и разместив оболочку чата слева от 50% и придав строке, все завернутые в класс и позицию relatve. Затем на меньших экранах вы можете поместить оболочку чата в относительную и левую из 0, чтобы она стекала ниже игрока, когда вы переходите к мобильной ширине. Вот разметка, которую я использовал. Также в примере я использую col-sm, но вы можете изменить его на col-md. Я просто использовал sm, потому что его легче было просматривать в демонстрации скрипта.

Вот скрипка демо перетащить выходной экран больше и меньше, чтобы увидеть результаты при различных размерах экрана 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;} 
}