将 YouTube 视频缩小到响应宽度

我有一个 YouTube 视频嵌入在我们的网站，当我缩小屏幕到平板电脑或手机的尺寸，它停止收缩在560像素左右的宽度。这是 YouTube 视频的标准吗? 还是我可以在代码中添加一些东西使它变得更小？

135577 次浏览
小开
最佳答案

您可以使 YouTube 视频响应与 CSS。将 iframe 包装在一个 div 中，使用“ video rapper”类，并应用以下样式:

.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%;
}

那个。视频包装器 div 应该在一个响应元素内。填充物。视频包装器是必要的，以防止视频崩溃。您可能必须根据您的布局调整数字。

小开

我使用 CSS 在这里接受的答案为我的响应 YouTube 视频-工作正常，直到 YouTube 更新了他们的系统大约在2015年8月初。YouTube 上的视频尺寸是一样的，但是不知道为什么，在接受的答案中的 CSS 现在把我们所有的视频都放在了信箱里。顶部和底部有黑色条纹。

我已经与周围的大小，并决定摆脱顶部填充和改变底部填充 56.45%。看起来不错。

.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
小开

这是旧的线程，但我有发现新的答案在 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
小开

只使用 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

小开

@ mag182的解决方案是可靠的，但它缺乏设置最大宽度的能力。我认为最大宽度为640px 是必要的，因为否则 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>

我还将内部包装中的填充底部设置为50% ，因为在@mag182的56% 中，顶部和底部出现了一个黑色条。

小开

如果你正在使用 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>
小开

好吧，看起来是个大解决方案。

为什么不直接在 iframe 中添加 width: 100%;? ;)

所以你的代码看起来像 <iframe style="width: 100%;" ...></iframe>

试试这个，就像我的情况一样。

享受吧! :)

小开

我用如下简单的 css 创建这个

HTML 代码

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


}

小开

与学分以上答案 https://stackoverflow.com/a/36549068/7149454

Boostrap 兼容，调整你的容器宽度(在这个例子中是300px) ，你就可以开始了:

<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>
小开

现代简单的 CSS 解决方案

新的 长宽比是这个问题的现代解决方案。

aspect-ratio: 16 / 9;

这就是自动生成 div、 image、 iframe 大小所需的全部内容。

它有 很好的支持，但是还没有在 Safari 中使用(将会在即将到来的 iOS15中使用)-所以现在你仍然需要使用一个备份。您可以使用@support 特性来实现这一点

.element
{
aspect-ratio: 16 / 9;


@supports not (aspect-ratio: 16 / 9)
{
// take your pick from the other solutions on this page
}
}

假设您的开发浏览器确实支持这个属性，那么您可以通过注释掉 aspect-ratio和 @supports来进行测试，而不使用它。

小开

如果您正在使用 Bootstrap 5.0，则可以使用 .ratio

Https://getbootstrap.com/docs/5.0/helpers/ratio/

例子

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

提交答案