如何使YouTube播放器缩放到页面宽度,同时保持宽高比？

Question

我想在我的网页上放一个YouTube视频.

我想缩放视频以适应用户浏览器的百分比,但也要保持宽高比.

我试过这个:

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

但这只会让玩家变得更宽,而不是更高.

我是否必须使用JavaScript(或非标准CSS)？

Answer 1

我认为最好的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/JBhp2/

Answer 2

现代解决方案 (2022) - 纵横比

随着aspect-ratio属性，现在缩放 YouTube 视频变得非常简单，无需求助于 CSS hacks 或 JS。

例子：

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

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

Answer 3

在开发一些响应式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>

Answer 4

用一些javascript很容易.

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

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

Answer 5

这个jQuery插件最近一直在进行,它被称为FitVids,完全符合您的需求,根据浏览器大小调整视频大小,同时保持宽高比.

http://fitvidsjs.com/

Answer 6

这些工作没有JS。响应式单一播放器和列表播放器从不确定的地方修改，抱歉没有信用。在 div 中加载您的 iframe Youtube 播放器，style="" 设置播放器大小，src= your-youtube-ID，添加自己的播放器选项jsfiddle.net/e2d50fym/3/

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe 
style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
src="https://www.youtube-nocookie.com/embed/0eKVizvYSUQ" 
allowfullscreen scrolling="no" 
allow="encrypted-media; accelerometer; 
gyroscope; picture-in-picture">
</iframe>

</div>

响应式 Youtube 列表播放器。nocookie（隐私模式），列表=您的播放列表ID，更改：-自动播放=0，循环=1 jsfiddle.net/e2d50fym/4/

<div style="left: 0; width: 100%; height: 0; 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>