html - 如何删除嵌入的 YouTube 视频下方的区域？

问题描述

我正在尝试制作一个网站，并在其中制作一个响应式 YouTube 视频。

我查找了有关如何使 YouTube 视频响应的教程，但问题是，即使我将填充和边距区域设置为 0，它也会在 YouTube 视频下方创建一个巨大的空白区域。

注意：在下面的示例中，youtube 视频看起来像一个黑色矩形。

如果有人能够找出导致 YouTube 视频下这个空白空间的原因，我将不胜感激。

body {
  font-family: helvetica;
  background-color: #99DCD7;
  margin: 0px;
}

h1 {
  margin: auto;
  margin-top: 150px;
  margin-bottom: 1vw;
  max-width: 60vw;
  font-size: 6vw;
  text-align: center;
  color: black;
}
#about {
  font-size: 1.15vw;
  max-width: 40vw;
  text-align: center;
  margin: auto;
  color: black;
}
div.latestep {
  font-size: 2vw;
  margin-top: 5vw;
  text-align: center;
  line-height: 0px;
  color: black;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin-bottom: 0px;
}
.video-responsive iframe{
    left:35%;
    top:0;
    height:30%;
    width:30%;
    position:absolute;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
#mlep {
  display: none;
  text-align: center;
  font-size: 6vw;
  margin: auto;
  max-width: 580px;
  margin-top: 50px;
  margin-bottom: 0px;
}
div.orlisten {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 7px;
  color: black;
}
a:link, a:visited {
  line-height: 30px;
  color: black;
  text-decoration: none;
  padding: 8px;
  margin: 12px;
  text-align: center;
}
a:hover, a:active {
  line-height: 30px;
  color: hotpink;
  text-decoration: none;
  padding: 8px;
  margin: 12px;
  text-align: center;
}
div.contact {
  margin-top: 40px;
  margin-bottom: 0px;
  text-align: center;
  font-size: 18px;
  display: solid;
}
#eop {
  color: black;
  text-align: center;
  margin-top: 60px;
}
div.form{
  text-align: center;
  margin-bottom: 0px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Slightly Scientific Podcast</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>

    <script src="script.js"></script>


    <h1>Lorem Ipsum</h1>

    <p id="about">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus nullam eget felis eget nunc lobortis mattis. Dictum varius duis at consectetur lorem. Nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi. At varius vel pharetra vel turpis nunc eget. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Vestibulum lectus mauris ultrices eros. Pretium viverra suspendisse potenti nullam. Est pellentesque elit ullamcorper dignissim cras tincidunt. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.</p>

    <div class="latestep">
      <p style="text-align: center"><strong>Our Latest Episode</strong></p>
    </div>
    <div class="video-responsive">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/qu4zyRqILYM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <p id="mlep">Listen to our latest episodes on:</p>
    <div class="orlisten">
      <a href="" target="_blank"><i class="fa fa-spotify"></i></a>
      <a href="" target="_blank"><i class="fa fa-podcast"></i></a>
      <a href ="" target="_blank"><i class="fa fa-youtube-play"></i></a>
    </div>



    <p id="eop">Footer</p>

  </body>
</html>

标签： htmlcssembedresponsive

解决方案

您的代码中的问题是您使用了 padding-bottom。我对代码进行了一些更改，我相信它对您有所帮助。如果没有，请不要犹豫，说。

body {
  font-family: helvetica;
  background-color: #99DCD7;
  margin: 0px;
}

h1 {
  margin: auto;
  margin-top: 150px;
  margin-bottom: 1vw;
  max-width: 60vw;
  font-size: 6vw;
  text-align: center;
  color: black;
}
#about {
  font-size: 1.15vw;
  max-width: 40vw;
  text-align: center;
  margin: auto;
  color: black;
}
div.latestep {
  font-size: 2vw;
  margin-top: 5vw;
  text-align: center;
  line-height: 0px;
  color: black;
}

.video-responsive{
   display: flex;
   justify-content: center;
 }
#mlep {
  display: none;
  text-align: center;
  font-size: 6vw;
  margin: auto;
  max-width: 580px;
  margin-top: 50px;
  margin-bottom: 0px;
}
div.orlisten {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 7px;
  color: black;
}
a:link, a:visited {
  line-height: 30px;
  color: black;
  text-decoration: none;
  padding: 8px;
  margin: 12px;
  text-align: center;
}
a:hover, a:active {
  line-height: 30px;
  color: hotpink;
  text-decoration: none;
  padding: 8px;
  margin: 12px;
  text-align: center;
}
div.contact {
  margin-top: 40px;
  margin-bottom: 0px;
  text-align: center;
  font-size: 18px;
  display: solid;
}
#eop {
  color: black;
  text-align: center;
  margin-top: 60px;
}
div.form{
  text-align: center;
  margin-bottom: 0px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Slightly Scientific Podcast</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>

    <script src="script.js"></script>


    <h1>Lorem Ipsum</h1>

    <p id="about">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus nullam eget felis eget nunc lobortis mattis. Dictum varius duis at consectetur lorem. Nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi. At varius vel pharetra vel turpis nunc eget. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Vestibulum lectus mauris ultrices eros. Pretium viverra suspendisse potenti nullam. Est pellentesque elit ullamcorper dignissim cras tincidunt. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.</p>

    <div class="latestep">
      <p style="text-align: center"><strong>Our Latest Episode</strong></p>
    </div>
    <div class="video-responsive">
      <iframe width="300" height="150" src="https://www.youtube.com/embed/qu4zyRqILYM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <p id="mlep">Listen to our latest episodes on:</p>
    <div class="orlisten">
      <a href="" target="_blank"><i class="fa fa-spotify"></i></a>
      <a href="" target="_blank"><i class="fa fa-podcast"></i></a>
      <a href ="" target="_blank"><i class="fa fa-youtube-play"></i></a>
    </div>



    <p id="eop">Footer</p>

  </body>
</html>

html - 如何删除嵌入的 YouTube 视频下方的区域？

问题描述

解决方案

推荐阅读