我想在我的网页上放一段YouTube视频。
我想缩放视频以适应用户浏览器的百分比，但也要保持宽高比。
我试过这个：
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
但这只会让玩家变得更宽，而不是更高。
我是否必须使用JavaScript（或非标准CSS）？
答案 0 :(得分：64)
我认为最好的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>
答案 1 :(得分：15)
在开发一些响应式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>
答案 2 :(得分：12)
使用一些javascript非常简单。
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
答案 3 :(得分：10)
This jQuery plugin最近一直在进行，它被称为FitVids，完全符合您的需求，根据浏览器大小调整视频大小，同时保持宽高比。
答案 4 :(得分：2)
使YouTube视频自动调整的技巧是将iframe宽度设置为100％并将其放在div中，其中“padding-bottom”等于百分比的宽高比。 E.g。
但问题是 - 你已经有很多嵌入了YoutTube视频的网页了。这是一个jquery插件，它将扫描页面上的所有视频，并通过更改iframe代码自动调整大小，如上所述。这意味着您不必更改任何代码。包含javascript，您的所有YouTube视频都会自动调整大小。 https://skipser.googlecode.com/files/youtube-autoresizer.js
答案 5 :(得分：2)
这些工作不使用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>
答案 6 :(得分：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>
这基本上会在768px处添加断点，视频会自行调整大小。您还可以在992和1280处添加断点，以获得更具代表性的视频大小。 （基于Bootstrap标准尺寸的数字）。
答案 7 :(得分：1)
您可以使用两个类，根据包装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包装在div中，其宽度设置为100％，position设置为relative。您还必须向iframe包装器添加底部填充。此填充将定义视频的高度。我建议创建两个代表图像比例的类。
为包含特定分辨率的包装器计算正确的底部填充非常容易。例如，对于res 4 by 3和16 by 9，底部填充等于：
[4/3 res]
100/4 * 3 = 75％;
[16/9 res]
100/16 * 9 = 56.25％
然后将iframe定位为绝对值并将其推到wraping div的左上角。还要确保将iframe的宽度和高度设置为100％。现在你还要做一件事。你完成了。
为您添加适合您的分辨率的类。它将分别缩放图像的宽度和高度，保持正确的比例。
上面的示例适用于任何iframe。这意味着你也可以将它用于谷歌地图iframe。
答案 8 :(得分：0)
您可以使用style="max-width: %87; max-height: %87;"
答案 9 :(得分：0)
除了达尔文和托德之外，还有以下解决方案
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;
}
}
答案 10 :(得分：0)
这对我有用。这是来自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>
答案 11 :(得分：0)
在使用js修改生成的iframe结构的答案列表上有一些建议。我认为存在风险，因为当您将iframe包装在其他元素中时，YouTube API可能会丢失“连接”。使用iframe（特别是如果您将元素作为节点传递而不是使用像我这样的特定ID）。实际上，实际上是在实际触发youtube播放器之前使用javascript来修改内容。
我的代码中的代码段：
/**
* 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 :(得分：0)
只需使用CSS vw指标设置iframe的高度和宽度。它使用设备宽度作为参数：
.videoWrapper iframe {
height: 36.6vw;
width: 65vw;
}
答案 13 :(得分：-2)
添加JavaScript代码，为每个youtube iFrame提供一个类：
$('iframe[src*="youtube"]').addClass('youtube')
然后在媒体查询中使用你的管类来设置不同的大小。
.youtube {
/* Do stuff here */
}
比手动方式更容易和优化CMS。