如何使 YouTube 播放器缩放到页面宽度，同时保持纵横比？

Posted 2023-02-24

【中文标题】如何使 YouTube 播放器缩放到页面宽度，同时保持纵横比？

【英文标题】：How can I make the YouTube player scale to the width of the page but also keep the aspect ratio?

【发布时间】：2011-12-05 22:59:09

【问题描述】：

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

我想缩放视频以适应用户浏览器的百分比，同时保持纵横比。

我试过这个：

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

但这只会使播放器更宽，而不是更高。

我必须求助于 javascript（或非标准 CSS）吗？

【参考方案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/

【讨论】：

迄今为止最好的解决方案。完全响应。像冠军一样工作。虽然对于宽屏视频，我将 padding-bottom 设置为 60%。

学分链接指向现在显示日期为 2014 年 8 月 28 日的页面，而这个答案是在 2013 年给出的。此外，该页面没有提到这里写的内容。我认为该链接不再相关。

太好了，谢谢。我正在尝试其他解决方案，它们可以让我让视频在移动设备或桌面设备上看起来不错，但我无法让它在移动设备和桌面设备上都看起来不错。这个答案解决了我的问题。谢谢。

删除max-width: 420px; 并按照上面的建议设置padding-bottom: 60%; 正是我所需要的。谢谢！

16:9 视频的 56.25%

【参考方案2】：

在开发一些响应式 CSS 时，我的网站遇到了类似的问题。当从桌面 CSS 切换到更小的 CSS 时，我希望任何嵌入的 Youtube 对象都能调整大小（我使用媒体查询为移动设备重新渲染内容）。

我选择的解决方案是基于 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>

【讨论】：

啊，我没有考虑过媒体查询——我的想法是平滑缩放，但它真的不必！ （您多久调整一次浏览器的大小？我可能会每天这样做 7 次）只是它大致适合并且看起来还不错 - 我很高兴。在接受您的回答之前，我会自己尝试一下（并给可能有更好主意的人一个机会，但我对此表示怀疑）-谢谢:)

【参考方案3】：

使用一些 javascript 很容易。

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

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

【讨论】：

这是宽屏比例的好建议。对于标准比例而不是 9/16(16:9)，请使用 3/4(4:3)。

我一定遗漏了什么，timelineheight var 有什么作用？为什么要加到宽度上？

当我写这个嵌入的 youtube 视频时，底部显示了一个 3 像素高的时间线。我现在已将其从答案中删除，因为它没有添加任何内容。

【参考方案4】：

This jQuery plugin 最近一直在流行，它被称为 FitVids，它可以满足您的需求，根据浏览器大小调整视频大小，同时保持宽高比。

http://fitvidsjs.com/

【讨论】：

如果调整屏幕大小，这不适用于 Youtube HTML5 播放器。 Youtube 设置 .html5-video-content div。否则，是的，它工作得很好。

出于某种原因，我的广告拦截器 (hostsblock) 阻止了 fitvidsjs 域。这是它的github page，供任何需要的人使用。

【参考方案5】：

这些工作没有 JS。对从某个不确定的地方修改的单个玩家和列表播放器都有响应，抱歉，没有信用。将您的 iframe Youtube 播放器加载到容器 div 中，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>

【讨论】：

那是完美的。适用于以 % 为单位的最小和最大宽度约束。我个人在元标记中使用媒体查询，但最终在当今社会，我在移动 css 文件之上使用基于 99% 的高度和宽度。

这不适用于最大宽度

如果你想使用最大宽度，我发现将整个东西封闭在一个附加容器中 自动边距将使外部容器居中您放置的位置 jsfiddle.net/jcb01/3su4twvx

【参考方案6】：

制作 youtube 视频自动调整大小的技巧是将 iframe 宽度设置为 100% 并将其放入一个 div 中，该 div 的“底部填充”等于纵横比的百分比。例如

但问题是 - 您已经有很多页面嵌入了 YouTube 视频。这是一个 jquery 插件，它将扫描页面上的所有视频，并通过将 iframe 代码更改为上述内容来自动调整它们的大小。这意味着您不必更改任何代码。包括 javascript，您的所有 YouTube 视频都会自动调整大小。 https://skipser.googlecode.com/files/youtube-autoresizer.js

【参考方案7】：

老问题，但我认为@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   frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

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

【参考方案8】：

这对我有用。这是来自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   src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>

【参考方案9】：

您可以使用style="max-width: %87; max-height: %87;"

【参考方案10】：

除了达尔文和托德之外，以下解决方案将

避免下边距 最大化大屏幕的宽度 最小化移动视图中的高度 为@media 不兼容的浏览器保持固定大小

HTML：

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

CSS：

.videoplayer

    text-align: center;
    vertical-align: middle;

    background-color:#000000;

    margin: 0;
    padding: 0;

    width: 100%;
    height:420px;

    overflow:hidden;

    top: 0;
    bottom: 0;



.auto-resizable-iframe 
    width:100%;
    max-width:100%;
    margin: 0px auto;


.auto-resizable-iframe > div 
    position: relative;
    padding-bottom:420px;
    height: 0px;


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



//full screen
@media (min-width:0px) 

    .videoplayer
        height:100%;
    

    .auto-resizable-iframe > div 
        padding-bottom:100%;
               



//mobile/pad view
@media (min-width:600px) 

    .videoplayer
        height:420px;
    

    .auto-resizable-iframe > div 
        padding-bottom:420px;
           

       

【讨论】：

您应该更新您的代码以修复：1. css 和 html 之间的类名混合匹配，2. css 的错误代码注释样式。否则，干得好。

【参考方案11】：

关于使用js修改生成的iframe结构的答案列表有几点建议。我认为这是有风险的，因为当您将 iframe 包装在其他元素中时，YouTube API 可能会失去与 iframe 的“连接”（特别是如果您将元素作为节点传递而不是像我一样使用特定的 id） .而是实际绕过它，在实际触发 youtube 播放器之前使用 javascript 修改内容。

我的代码中的一个 sn-p：

/**
 * Given the player container, we will generate a new structure like this
 *
 * <div class="this-is-the-container">
 *      <div class="video-player">
 *          <div class="auto-resizable-iframe">
 *              <div>
 *                  <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *
 * @return Node the real player node deep inside
 */
YouTube.renderResizable = function (playerContainer) 
    // clean up the content of player container
    playerContainer.textContent = '';

    var playerDiv = document.createElement('div');
    playerDiv.setAttribute('class', 'video-player');

    playerContainer.appendChild(playerDiv);

    // add the auto-resizable-frame-div
    var resizeableDiv = document.createElement('div');
    resizeableDiv.setAttribute('class', 'auto-resizable-iframe');

    playerDiv.appendChild(resizeableDiv);

    // create the empty div
    var div = document.createElement('div');
    resizeableDiv.appendChild(div);

    // create the real player
    var player = document.createElement('div');
    div.appendChild(player);

    return player;
;

【参考方案12】：

只需使用 CSS vw 公制设置 iframe 的高度和宽度。它使用设备宽度作为参数：

.videoWrapper iframe 
    height: 36.6vw;
    width: 65vw; 

【参考方案13】：

您可以使用两个类来根据包装 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 包装器添加底部填充。此填充将定义视频的高度。我建议创建两个代表图像比例的类。

计算代表特定分辨率的包装器的右下填充非常容易。例如 res 4 x 3 和 16 x 9 的底部填充等于：

[4/3 分辨率]

100 / 4 * 3 = 75%；

[16/9 分辨率]

100 / 16 * 9 = 56.25%

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

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

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

【参考方案14】：

添加 JavaScript 代码给每个 youtube iFrame 一个类：

$('iframe[src*="youtube"]').addClass('youtube')

然后在 Media Queries 中使用 you tube 类来设置不同的大小。

.youtube 
   /* Do stuff here */

比手动方式更容易并针对 CMS 进行了优化。

【讨论】：

不是真正相关的答案。你也只是复制选择器，没有别的。你可以在 css 中做iframe[src*="youtube"] 。 As documented here