Html 如何让 YouTube 播放器缩放到页面的宽度，同时保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7737557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make the YouTube player scale to the width of the page but also keep the aspect ratio?
提问by Frank
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）？
采纳答案by Ben
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 时，我的网站遇到了类似的问题。我希望任何嵌入的 Youtube 对象在从桌面 CSS 切换到更小的东西时调整大小（我使用媒体查询为移动设备重新呈现内容）。
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>
回答by Darwin
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>
回答by Darwin
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);
});
回答by Ben Everard
This jQuery pluginhas 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，它完全符合您的需要，根据浏览器大小调整视频大小，同时保持纵横比。
回答by arunskrish
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 中，“padding-bottom”等于纵横比的百分比。例如
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
但问题是 - 您已经有很多带有嵌入 YoutTube 视频的页面。这是一个 jquery 插件，它将扫描页面上的所有视频，并通过将 iframe 代码更改为上述代码来自动调整它们的大小。这意味着您不必更改任何代码。包括 javascript，您的所有 YouTube 视频都会自动调整大小。 https://skipser.googlecode.com/files/youtube-autoresizer.js
回答by jcb01
These work a treat no JS. Responsive single palyer and list player modified from somewhere not sure, no credit sorry. Load your iframe Youtube player inside the div, the style=" " sets the player size, src= your-youtube-ID, add own player options jsfiddle.net/e2d50fym/3/
这些工作没有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>
Responsive Youtube List player. nocookie(privacy mode), list= your playlistID, change :- autoplay =0, loop=1 jsfiddle.net/e2d50fym/4/
响应式 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>
回答by DevWL
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 包装在宽度设置为 100% 且位置设置为相对的 div 中。您还必须向 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 x 3 和 16 x 9 的底部填充等于：
[4/3 res]
100 / 4 * 3 = 75%;
[16/9 res]
100 / 16 * 9 = 56.25%
[4/3 资源]
100 / 4 * 3 = 75%；
[16/9 资源]
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 定位为绝对并将其推到环绕 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。
回答by todd.pund
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 处添加断点，以获得更具响应性的视频大小。（数字基于 Bootstrap 标准尺寸）。
回答by RafaSashi
In addition to Darwin and Todd the following solution will
除了达尔文和托德，以下解决方案将
- avoid the bottom margin
- maximize the width for large screens
- minimize the height in mobile view
- keep a fixed size for @media none compatible browsers
- 避免底部边距
- 最大化大屏幕的宽度
- 最小化移动视图中的高度
- 为@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;
}
}
回答by Lenwood
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>
