Question

我一般不熟悉stackoverflow和Web设计，因此，如果这是一个简单的解决方法（很可能是，我还在学习），或者我的语言不正确，我深表歉意。

我只是想做到这一点，所以我的youtube视频不会变得超出特定尺寸。他们看起来像我希望他们在移动设备和平板电脑上的样子，因为我在其中编写了“ mobile.css”代码。但是在较大的屏幕上会占用太多空间，因此我想限制视频的显示大小。我希望这是有道理的。非常感谢您的帮助！

我尝试做很多事情，但是找不到与我的“ mobile.css”代码兼容的内容。我减小了计算机屏幕上视频的大小，但随后又使它们在手机或平板电脑上变小了，这是我所不希望的。

<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

这是整个页面的家伙。希望这会有所帮助。

<!DOCTYPE html>
<html>
<head>

<body style="background-color:linen;">

<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #185a83;
}
</style>
</head>
<body>

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="quotes.html">Quotes</a></li>
  <li><a class="active" href="youtube.html">Youtube</a></li>
  <li><a href="blog.html">My Blog</a></li>
</ul>


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Page Title</title>
</head>
<body>

    <br>
    <br>

<h1 style="color:black;text-align:center">Some Helpful YouTube Videos</h1>

<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>


<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/drv3BP0Fdi8" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/JWUuno-K5YE" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/Lp7E973zozc" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/w7rewjFNiys" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Answer 1

只需向iframe添加高度和宽度

如果要占据元素的总宽度，则使width:100%

或者您也可以根据需要指定高度和宽度像这样，

iframe{
height:300px;
width:300px;
}

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

Answer 2

即使您希望它非常简单，但是想要实现的目标却令人惊讶地复杂。可以通过一个小的解决方法来获得完全响应的嵌入式iframe视频。基本上，您需要将iframe包装在relative位置的容器中，以便可以将iframe绝对定位在其中，从而限制溢出并使用填充来抵消宽高比来创建人造底部。

考虑以下示例：https://jsfiddle.net/8kh9j7wx/1/

视频将始终停留在父元素的范围内，并始终保持该元素的100％宽度，同时保持其他答案无法解决的极为重要的宽高比。

这是您修改后的标记：

<div class="video-responsive">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/2SUqC8PGrtU" frameborder="0" allowfullscreen></iframe>
</div>

这是您的CSS：

.video-container {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

您当然可以通过在容器元素上声明max-width并使用margin:auto将其居中来将宽度限制为最大。

Answer 3

您可以添加CSS width和height属性。如果将CSS width和height属性设置为百分比值，则在调整浏览器窗口大小时，视频将按比例缩放。调整浏览器窗口的大小以查看效果。

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

如何为YouTube视频添加最大尺寸？

3 个答案: