我如何使YouTube播放器的尺寸与页面的宽度成比例，同时又能保持纵横比?

I have a YouTube video I want to put on my web page.

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

I want to scale the video to fit to a percent of the users browser but also to keep the aspect ratio.

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

I have tried this:

我试过这个:

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

But that does only make the player wider, not higher.

但这只会让玩家变得更广，而不是更高。

Does I have to resort to JavaScript (or non-standard CSS)?

我需要使用JavaScript(或非标准CSS)吗?

12 个解决方案

#1

I hit a similar issue with my site when developing some responsive CSS. I wanted any embedded Youtube objects to resize, with aspect, when switching from the desktop CSS to something smaller (I use media queries to re-render content for mobile devices).

我在开发响应性CSS时遇到了类似的问题。当我从桌面CSS切换到更小的东西(我使用媒体查询来为移动设备重新渲染内容)时，我希望任何嵌入的Youtube对象都能有相位调整大小。

The solution I settled on was CSS and mark-up based. Basically, I have three video classes in my CSS thus:

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

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

… and I assign one of these to the Youtube content I include, depending on its original size (you may need more classes, I just picked the most common sizes).

我将其中的一个分配给Youtube内容，这取决于它的原始大小(您可能需要更多的类，我只是选择了最常见的大小)。

In the media query CSS for smaller devices, these same classes are simply re-stated like so:

在小设备的媒体查询CSS中，这些类被简单地重新声明如下:

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

I appreciate this requires some mark-up "up-front" when including videos in your HTML (i.e. adding a class), but if you don't want to go down the Javascript route, this works pretty well -- you could re-state your video classes for as many different sizes as you require. Here's how the Youtube mark-up looks:

当在HTML中包含视频(例如添加一个类)时，我很欣赏这一点，但如果您不想沿着Javascript的路线走下去，那么这将非常有效——您可以根据需要重新声明视频类的不同大小。下面是Youtube的标记:

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

#2

What i believe to be the best CSS solution.

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

Demo http://jsfiddle.net/JBhp2/

演示http://jsfiddle.net/JBhp2/

#3

This jQuery plugin has been making the rounds of late, it's called FitVids and does exactly what you need, resizes videos based on browser size whilst maintaining aspect ratio.

这个jQuery插件最近一直在流行，它叫做FitVids，可以根据浏览器大小调整视频大小，同时保持高宽比。

http://fitvidsjs.com/

http://fitvidsjs.com/

#4

Quite easy with some javascript.

使用一些javascript非常简单。

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

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

#5

The trick to make a youtube video autoresize is to make the iframe width 100% and put it in a div with a "padding-bottom" equal to the aspect ratio in percentage. E.g.

youtube视频自动调整的诀窍是将iframe宽度设置为100%，并将其放入一个div中，其“拍底”的比例为百分数。如。

But the problem is - you would have a lot of pages with embedded YoutTube videos already. Here's a jquery plugin that will scan all videos on the page and make them resizable automatically by changing the iframe code to be as above. That means you don't have to change any code. Include the javascript and all your YouTube videos become autoresizing. https://skipser.googlecode.com/files/youtube-autoresizer.js

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

#6

Old question, but I think the @media CSS 3 tags would be helpful in this instance.

老问题，但是我认为@media CSS 3标签在这个例子中会有帮助。

Here is my solution to a similar problem.

这是我解决类似问题的方法。

The CSS:

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

The HTML:

HTML:

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

This basically adds a breakpoint at 768px where the video resizes itself. You could also add breakpoints at 992 and 1280 for an even more repsonsive video size. (numbers based on Bootstrap standard sizes).

这基本上是在768px上添加了断点，视频可以在这里调整自己的大小。您还可以在992和1280上添加断点，以获得更复杂的视频大小。(基于引导标准尺寸的数字)。

#7

You could use two classes that would scale the size of the video based on the size of the wrapping div. Consider this example:

您可以使用两个类，根据包装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>

Now look at the css.

现在看看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%;
}

Note that you will have to wrap the iframe in a div who's width is set to 100% and position is set to relative. You have to also add a bottom-padding to iframe wrapper. This padding will define the height of a video. I recommend to create two classes that will represent the image ratio.

注意，您必须将iframe封装在一个div中，该div的宽度设置为100%，位置设置为relative。您还必须向iframe包装器添加底部填充。这种填充将定义视频的高度。我建议创建两个类来表示图像比例。

It is quite easy to calculate the right bottom-padding for wrappers that represent certain resolution. For example for res 4 by 3 and 16 by 9 would have bottom-padding equal to:

对于表示一定分辨率的包装器，很容易计算正确的底部填充。例如，对于res 4×3和16×9，其底边距等于:

[4/3 res]

(4/3 res)

100 / 4 * 3 = 75%;

100 / 4 * 3 = 75%;

[16/9 res]

(res)16/9

100 / 16 * 9 = 56.25%

100 / 16 * 9 = 56.25%

Then position the iframe as absolute and push it to the top left corner of the wraping div. Also meke sure to set iframe width and height to 100%. Now you have to do one more thing. You are done.

然后将iframe定位为绝对，将其推到wraping div的左上角，也可以设置iframe宽度和高度为100%。现在你必须再做一件事。你是做。

Add the class that fits the right resolution for you. It will scale the image width and height respectively keeping the right proportions in place.

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

The example above works for any iframe. Thats mean you can also use it for google maps iframe.

上面的例子适用于任何iframe。这意味着你也可以将它用于谷歌映射iframe。

#8

You can use style="max-width: %87; max-height: %87;"

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

#9

In addition to Darwin and Todd the following solution will

除了达尔文和托德，下面的解决方案将会

1. avoid the bottom margin
2. 避免底部边距
3. maximize the width for large screens
4. 最大化大屏幕的宽度
5. minimize the height in mobile view
6. 最小化移动视图中的高度
7. keep a fixed size for @media none compatible browsers
8. 保持一个固定大小的@media不兼容浏览器

The HTML:

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>

The CSS:

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

}       

#10

This is what worked for me. This is slightly modified code from the YouTube Embed Code Generator.

这对我起了作用。这是YouTube嵌入代码生成器中稍作修改的代码。

The CSS:

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

The HTML:

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>

#11

There are a few suggestions on the list of answers to use js to modify the structure of generated iframe. I think there is a risk with that because when you wrap the iframe inside other elements it's possible that the YouTube API will lose 'connection' with the iframe (especially if you pass the element in as a node instead of using specific id like me). It's rather to get around it actually, use javascript to modify the content before you actually trigger the youtube player.

在使用js修改生成的iframe结构的答案列表中，有一些建议。我认为这样做存在风险，因为当你将iframe封装到其他元素中时，YouTube API可能会失去与iframe的“连接”(特别是如果你将该元素作为节点传递进来，而不是像我这样使用特定的id)。而是绕过它，在你真正触发youtube播放器之前使用javascript修改内容。

a snippet from my code:

我的代码片段:

/**
 * 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

Add JavaScript code to give each youtube iFrame a class:

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

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

Then in the Media Queries use the you tube class to set a different size.

然后在媒体查询中使用you tube类设置不同的大小。

.youtube {
   /* Do stuff here */
}

Easier and optimized to CMS than the manual way.

与手动方式相比，CMS更容易优化。