ブートストラップ、お互いに隣り合う2つの応答性のあるiframe

Question

私のサイトでは、チャットでTwitchプレーヤーを持っています。私はそれが敏感である必要があります。私は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：私はグリッドからパディングを削除するには、このCSSを使用しています

.nopadding { 
padding: 0 !important; } 

を、私はプレーヤーを持っていると隣同士にチャットする必要がありますパディングなし。

チャットは小さく、正確には高さが小さすぎるという問題があります。私はCSSで高さを設定することができますが、この高さはプレーヤーの高さでは変わりません。どうすれば修正できますか？

Answer 1

これを行うには、チャットラッパーを絶対に設定し、その内側のiframeの幅と高さを100％に設定し、チャットラッパーを50％の左に配置し、すべてがクラスに包まれ、関連する位置にある。小さな画面では、チャットラッパーを相対的に配置し、0のままにしておくことで、モバイルの幅になったときにプレーヤーの下にスタックすることができます。ここに私が使ったマークアップがあります。また、この例ではcol-smを使用していますが、col-mdに変更することができます。私はsmを使用しました。これは、フィドルのデモで簡単に表示できるからです。

<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;} 
} 

ここ

はFiddle Demo

HTML形式のサイズフィドルデモは異なる画面で結果を確認する出力画面大小ドラッグであります