我在我们的网站上嵌入了一个 YouTube 视频，当我将屏幕缩小到平板电脑或手机尺寸时，它会在宽度约为 560 像素时停止缩小。这是 YouTube 视频的标准还是我可以添加到代码中以使其变小？
问问题
130902 次
10 回答
292
您可以使用 CSS 使 YouTube 视频具有响应性。使用“videowrapper”类将 iframe 包装在 div 中，并应用以下样式：
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videowrapper div 应该在响应式元素内。.videowrapper 上的填充是防止视频折叠所必需的。您可能需要根据您的布局调整数字。
于 2013-04-05T22:18:58.103 回答
29
如果您使用的是 Bootstrap，您还可以使用响应式嵌入。这将完全自动化地使视频响应。
http://getbootstrap.com/components/#responsive-embed
下面有一些示例代码。
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
于 2016-04-11T12:44:52.543 回答
10
使用 jQuery 为 YouTube 和 Vimeo 改进的仅 Javascript 解决方案。
// -- After the document is ready
$(function() {
// Find all YouTube and Vimeo videos
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
// Get parent width of this video
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
只需嵌入即可简单使用：
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
或者使用像 Bootstrap 这样的响应式风格框架。
<div class="row">
<div class="col-sm-6">
Stroke Awareness
<div class="col-sm-6>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
- 依靠 iframe 的宽度和高度来保持纵横比
- 可以使用宽高比作为宽度和高度 (
width="16" height="9") - 等到文档准备好再调整大小
- 使用 jQuery 子字符串
*=选择器而不是字符串的开头^= - 从视频 iframe 父级而不是预定义元素获取参考宽度
- Javascript 解决方案
- 没有 CSS
- 无需包装
感谢@Dampas 的起点。 https://stackoverflow.com/a/33354009/1011746
于 2015-11-14T13:36:26.597 回答
9
我在此处接受的答案中使用 CSS 来处理我的响应式 YouTube 视频 - 在 YouTube 于 2015 年 8 月左右更新他们的系统之前效果很好。YouTube 上的视频尺寸相同，但无论出于何种原因，现在接受的答案中的 CSS信箱我们所有的视频。顶部和底部有黑色条纹。
我已经对尺寸进行了调整，并决定摆脱顶部填充并将底部填充更改为56.45%. 似乎看起来不错。
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
于 2015-08-14T14:32:18.937 回答
4
@magi182 的解决方案是可靠的，但它缺乏设置最大宽度的能力。我认为 640 像素的最大宽度是必要的，因为否则 youtube 缩略图看起来像素化。
我的两个包装器的解决方案对我来说就像一个魅力：
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
我还将内部包装器中的 padding-bottom 设置为 50 %，因为在 @magi182 的 56 % 时，顶部和底部出现了一个黑条。
于 2016-04-06T13:50:16.713 回答
3
现代简单的css解决方案
新的纵横比是这个问题的现代解决方案。
aspect-ratio: 16 / 9;
这就是您自动制作 div、图像、iframe 大小所需的全部内容。样品。
它得到了很好的支持，但还没有在 Safari 中（将用于即将到来的 iOS15）——所以现在你仍然需要使用后备。您可以使用 @supports 功能实现这一点
.element
{
aspect-ratio: 16 / 9;
@supports not (aspect-ratio: 16 / 9)
{
// take your pick from the other solutions on this page
}
}
假设您的开发浏览器确实支持此属性，请务必通过注释掉aspect-ratio和来在没有它的情况下进行测试@supports。
于 2021-07-18T21:02:06.257 回答
2
这是旧线程，但我在https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php上找到了新答案
以前的解决方案的问题是您需要在视频代码周围有特殊的 div，这不适合大多数用途。所以这里是没有特殊 div 的 JavaScript 解决方案。
// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS
于 2015-10-26T19:27:57.373 回答
1
归功于先前的答案https://stackoverflow.com/a/36549068/7149454
Boostrap 兼容，调整您的容器宽度（在本例中为 300 像素），您就可以开始了：
<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
于 2019-04-11T07:23:53.510 回答
-2
好的，看起来像大解决方案。
为什么不width: 100%;直接添加到您的 iframe 中。;)
所以你的代码看起来像<iframe style="width: 100%;" ...></iframe>
试试这个，它会像我的情况一样工作。
享受！:)
于 2016-05-26T07:42:23.243 回答
-2
我用简单的css做这个如下
代码
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSS 代码
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}
于 2017-03-18T10:41:56.960 回答