如何使YouTube播放器适应页面宽度但又保持纵横比？

Question

如何使YouTube播放器适应页面宽度但又保持纵横比？

50

我有一个YouTube视频想要放在我的网页上。

我希望将视频缩放到适合用户浏览器的百分比大小，并保持纵横比。

我尝试了以下代码：

<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>

但这只会让播放器变宽，而不会变高。

我是否必须使用JavaScript（或非标准CSS）？

- Frank

15个回答

16

在开发一些响应式CSS时，我的网站遇到了类似的问题。我希望任何嵌入的YouTube对象在从桌面CSS切换到较小的样式（我使用媒体查询重新渲染移动设备内容）时可以按比例缩放。

我采用的解决方案是基于CSS和标记的。基本上，在我的CSS中有三个视频类：

.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}

根据原始大小（您可能需要更多的类，我只选择了最常见的大小），我会为包含的Youtube内容分配其中一个类。

在用于较小设备的媒体查询CSS中，这些相同的类只是被重新说明，如下所示：

.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}

我很欣赏在HTML中包含视频时需要一些标记“前置”（例如添加类），但如果您不想使用Javascript，这个方法非常有效--您可以为所需的不同尺寸重复声明视频类。以下是Youtube标记的示例：

<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
  <param name="movie" value="YOUTUBE URL"></param>
</object>

- Ben

啊，我没有考虑到这个媒体查询 - 我的思维一直固定在平滑缩放上，但实际上并不需要！（你有多经常调整浏览器大小？我可能每天最多会这样做7次）只要大致适合并且看起来还可以 - 我就很满意了。在接受你的答案之前，我会自己试一试（也给那些可能有更好想法的人一个机会，但我怀疑这种情况）- 谢谢 :) - Frank

16

现代解决方案（2022）- aspect-ratio

CSS中引入了aspect-ratio属性，现在可以很简单地缩放YouTube视频而不需要使用CSS hack或JS。

示例：

iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

aspect-ratio 属性得到大多数浏览器的广泛支持，适用于绝大多数网站：https://caniuse.com/mdn-css_properties_aspect-ratio

- Nathan Dawson

4

这应该是被接受的答案，其他的都是技术债务。 - codycustard

12

使用一些JavaScript很容易实现。

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});

- Darwin

1

这是一个关于宽屏比例的好建议。对于标准比例，可以使用3/4（4:3）而不是9/16（16:9）。 - raphie

我一定漏掉了什么，timelineheight变量是做什么用的？为什么要加到宽度上？ - Eric

当我编写这段代码时，嵌入的YouTube视频底部会显示一个高度为3像素的时间轴。由于它没有任何作用，我已经从答案中将其删除。 - Darwin

11

这个jQuery插件最近很流行，它叫做FitVids，可以根据浏览器大小调整视频尺寸，并保持纵横比。

http://fitvidsjs.com/

- Ben Everard

如果屏幕被调整大小，这将无法与Youtube HTML5播放器一起使用。Youtube设置了 .html5-video-content div。否则，它可以很好地工作。 - Adam S

由于某种原因，我的广告拦截器（hostsblock）正在阻止fitvidsjs域。这是它的github页面，供需要的人使用。 - Daniel Hanrahan

7

这些东西没有JS也能正常运作。对于单个播放器和列表播放器都是响应式的，从某个地方修改而来，不确定来源，抱歉无法署名。在一个容器div中加载你的iframe Youtube播放器，iframe样式设置了播放器特定的大小，100％会填充容器到任意大小，src = your-youtube-ID，添加自己的播放器选项。 https://jsfiddle.net/jcb01/04sf3byz/

    <div style=" position: relative; padding-bottom: 56.25%;">
<!--- load iframe Youtube player inside this div -->
<iframe 
style="border: 1; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
src="https://www.youtube-nocookie.com/embed/?
list=PL590L5WQmH8fmto8QIHxA9oU7PLVa3ntk;
&autoplay=0&enablejsapi=1&index=0&
listType=playlist&loop=1&modestbranding=1" 
allowfullscreen scrolling="no" 
allow="encrypted-media; accelerometer; 
gyroscope; picture-in-picture">
</iframe>

</div>

- jcb01

这是完美的。适用于最小和最大宽度约束（%）。个人而言，我在元标记中使用媒体查询，但最终在今天的社会中，我使用99％基于百分比的高度和宽度，以及移动CSS文件。 - JSG

这不适用于最大宽度。 - user1034912

如果您想使用max-width，我发现将整个内容放在一个额外的容器<div style=" max-width:800px; margin: 0px auto;">  </div>中，自动边距将使外部容器居中，无论您将其放在哪里 https://jsfiddle.net/jcb01/3su4twvx/ - jcb01

2

使youtube视频自适应大小的技巧是将iframe宽度设置为100%，并放置在一个div中，该div的“padding-bottom”等于百分比的宽高比。例如：

但问题是 - 您可能已经有很多嵌入式YouTube视频的页面。这里有一个jQuery插件，它将扫描页面上的所有视频，并通过更改iframe代码自动调整它们的大小，以达到与上述相同的效果。这意味着您不需要更改任何代码。包含javascript，所有YouTube视频都将自动调整大小。 https://skipser.googlecode.com/files/youtube-autoresizer.js

- arunskrish

1

虽然这个问题比较老，但我认为使用 @media CSS 3 标签可以在这种情况下有所帮助。

以下是我解决类似问题时采用的CSS：

@media only screen and (min-width: 769px) {
    .yVid {
        width: 640px;
        height: 360px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .yVid {
        width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

HTML：

<div class="yVid">
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

这基本上在768像素处添加了一个断点，视频将自动调整大小。你还可以在992和1280处添加断点，以获得更加响应式的视频大小。（数字基于Bootstrap标准尺寸）。

- todd.pund

1

这是我使用的方法。这是稍作修改的代码，来自YouTube Embed Code Generator。

CSS部分：

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

HTML代码：

<div class="video-container">
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>

- Lenwood

0

您可以使用两个类来根据包装 div 的大小缩放视频的大小。考虑以下示例：

<div class="content-wrapper">
    <div class="iframe-wrapper res-16by9">   
        <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

现在看一下 CSS。

.content-wrapper{
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.iframe-wrapper{
  width: 100%;
  position: relative;
}

.res-4by3{
  padding-bottom: 75%;
}

.res-16by9{
  padding-bottom: 56.25%;
}

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

请注意，您需要将iframe包装在一个宽度设置为100％且位置设置为相对的div中。您还必须向iframe包装器添加底部填充。此填充将定义视频的高度。我建议创建两个类来表示图像比例。

计算代表特定分辨率的包装器的正确底部填充非常容易。例如，对于4:3和16:9的分辨率，底部填充应分别为：

[4/3分辨率] 100 / 4 * 3 = 75％; [16/9分辨率] 100 / 16 * 9 = 56.25％

然后将iframe定位为绝对位置，并将其推到包装div的左上角。还要确保将iframe的宽度和高度设置为100％。完成了。

添加适合您的正确分辨率的类。它将按比例缩放图像的宽度和高度，保持正确的比例。

上面的示例适用于任何iframe。这意味着您也可以将其用于Google地图iframe。

- DevWL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darwin · Accepted Answer

我认为这是最好的CSS解决方案。

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

演示 http://jsfiddle.net/46vp592y/