使用引導程序自動調整iframe（YouTube視頻）的大小

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>

我希望YouTube影片整個的iframe將是行內。此外，屏幕更改（自適應設計）時，高度和寬度之間的比率應該相同。

Answer 1

在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>

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。

---

而另一件事，你使用引導列錯誤。當您執行col col-lg-4 col-md-4 col-sm-12 col-xs-12時，您無需將其指定給所有版本，只需要更改次版本和更低版本即可，該版本將爲col col-md-4（默認情況下，所有列均爲手機上的col-xs-12，使用col-md-4後會也可以將它用於lg）。