ブートストラップを使ってiframe（youtube video）のサイズを自動的に変更

Question

私はこのようなウェブサイトを構築したいと考えていますhttps://www.emimacleod.com/totem.html。しかし、私が書いたコードは、iframeでは機能しません。

<div class="container"> 
 
\t \t \t <div class="row justify-content-between" id="basic-program-info-container"> 
 
\t \t \t \t <div class="col col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
\t \t \t \t \t <div class="title"> 
 
\t \t \t \t \t \t <h1>ProjectName</h1> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="program-info-container"> 
 
\t \t \t \t \t \t <h2 class="title">Institute</h2> 
 
\t \t \t \t \t \t <h3 class="content">XXX University</h3> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="program-info-container"> 
 
\t \t \t \t \t \t <h2 class="title">Time</h2> 
 
\t \t \t \t \t \t <h3 class="content">2016 XXX - 2016 XXX</h3> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="program-info-container"> 
 
\t \t \t \t \t \t <h2 class="title">Team member</h2> 
 
\t \t \t \t \t \t <h3 class="content">Name1</h3> 
 
\t \t \t \t \t \t <h3 class="content">Name1</h3> 
 
\t \t \t \t \t \t <h3 class="content">Name1</h3> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col col-lg-7 col-md-7 col-sm-12 col-xs-12"> 
 
\t \t \t \t \t \t <h2 class="intro-content">Introduction</h2> 
 
\t \t \t \t \t \t <h2 class="intro-content">Introduction</h2> 
 
\t \t \t \t \t \t <iframe src="https://www.youtube.com/embed/blahblahblah" frameborder="0" allowfullscreen></iframe> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
    </div>

私はユーチューブビデオのための全体のiframeが行の内側にあることを願っています。また、高さと幅の比は、画面が変化するとき（適応設計）に同じでなければなりません。

Answer 1

iframeのスタイルでposition: absolute;とwidth: 100%を使用すると、ブートストラップ要素の全幅を使用することができます。スタイル属性をheightに設定します。

<div class="container"> 
 
\t \t \t <div class="row justify-content-between" id="basic-program-info-container"> 
 
\t \t \t \t <div class="col col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
\t \t \t \t \t <div class="title"> 
 
\t \t \t \t \t \t <h1>ProjectName</h1> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="program-info-container"> 
 
\t \t \t \t \t \t <h2 class="title">Institute</h2> 
 
\t \t \t \t \t \t <h3 class="content">XXX University</h3> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="program-info-container"> 
 
\t \t \t \t \t \t <h2 class="title">Time</h2> 
 
\t \t \t \t \t \t <h3 class="content">2016 XXX - 2016 XXX</h3> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="program-info-container"> 
 
\t \t \t \t \t \t <h2 class="title">Team member</h2> 
 
\t \t \t \t \t \t <h3 class="content">Name1</h3> 
 
\t \t \t \t \t \t <h3 class="content">Name1</h3> 
 
\t \t \t \t \t \t <h3 class="content">Name1</h3> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col col-lg-7 col-md-7 col-sm-12 col-xs-12"> 
 
\t \t \t \t \t \t <h2 class="intro-content">Introduction</h2> 
 
\t \t \t \t \t \t <h2 class="intro-content">Introduction</h2> 
 
\t \t \t \t \t \t <iframe src="https://www.youtube.com/embed/blahblahblah" frameborder="0" allowfullscreen style="width: 100%; position: absolute;"></iframe> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
    </div> 
 
     
 
    <!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

参照ブートストラップのembed examples、そのような（ブートストラップ4を使用している場合）：

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8"></iframe> 
</div> 

ブートストラップ3 here。

---

もう1つのことは、ブートストラップ列を間違って使用していることです。 col col-lg-4 col-md-4 col-sm-12 col-xs-12を実行すると、すべてのバージョン、それが変更されるマイナーバージョンと下位バージョン（つまりcol col-md-4）に指定する必要はありません（デフォルトでは、すべての列はモバイルでcol-xs-12で、col-md-4を使用すると、 lgでもそれを使用してください）。