使用引导程序自动调整iframe（YouTube视频）的大小
问题描述：
我希望能建立一个像这样的网站https://www.emimacleod.com/totem.html。但是我写的代码不适用于iframe。使用引导程序自动调整iframe（YouTube视频）的大小
<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>我希望YouTube影片整个的iframe将是行内。此外，屏幕更改（自适应设计）时，高度和宽度之间的比率应该相同。
答
在iframe的样式中使用position: absolute;和width: 100%，可以使其使用bootstrap元素的整个宽度。根据自己的喜好设置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>
答
见引导的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。
而另一件事，你使用引导列错误。当您执行col col-lg-4 col-md-4 col-sm-12 col-xs-12时，您无需将其指定给所有版本，只需要更改次版本和更低版本即可，该版本将为col col-md-4（默认情况下，所有列均为手机上的col-xs-12，使用col-md-4后会也可以将它用于lg）。