如何将 youtube 嵌入式视频定位在另一个部分下，因为它在响应后覆盖了整个页面横幅？
How to position youtube embedded video under another section since it has covered the entire page banner after making it responsive?
四处移动后，我尝试将实际 iframe class 的 position: absolute 更改为 position: relative，它使视频位置低于 'Featured' 但维度的视频搞砸了。如果我把它改回 position: absolute，视频会覆盖整个页面横幅，但是响应性很好，但是尺寸太大了。如何使视频看起来像在精选页面下方、居中对齐并且响应迅速？
这是我的代码：
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
@media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
@media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
@media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
@media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
@media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
@media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
@media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
@media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
@media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
老实说，您的代码一团糟。您有多个 div 没有结束标签，p 没有结束标签，
在 html 代码中声明 类 时也缺少一些 =。
首先检查你的代码，确保每个标签都有一个结束标签，然后继续你的视频，因为如果你不解决这些问题，那么你的响应将因为那些未关闭的标签而中断。
看看那个，我已经修复了视频，所以现在它在您的特色部分下，您只需在关闭每个未关闭的标签后尝试一下，使其响应。
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
四处移动后，我尝试将实际 iframe class 的 position: absolute 更改为 position: relative，它使视频位置低于 'Featured' 但维度的视频搞砸了。如果我把它改回 position: absolute，视频会覆盖整个页面横幅，但是响应性很好，但是尺寸太大了。如何使视频看起来像在精选页面下方、居中对齐并且响应迅速？
这是我的代码：
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
@media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
@media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
@media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
@media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
@media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
@media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
@media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
@media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
@media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
老实说，您的代码一团糟。您有多个 div 没有结束标签，p 没有结束标签，
在 html 代码中声明 类 时也缺少一些 =。
首先检查你的代码，确保每个标签都有一个结束标签，然后继续你的视频，因为如果你不解决这些问题，那么你的响应将因为那些未关闭的标签而中断。
看看那个，我已经修复了视频，所以现在它在您的特色部分下，您只需在关闭每个未关闭的标签后尝试一下，使其响应。
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>