我有一个 YouTube 视频想放在我的网页上。
我想缩放视频以适应用户浏览器的百分比，同时保持纵横比。
我试过这个：
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
但这只会使播放器更宽，而不是更高。
我必须求助于 JavaScript（或非标准 CSS）吗？
【问题讨论】：
我认为最好的 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>
【讨论】：
padding-bottom 设置为 60%。
max-width: 420px; 并按照上面的建议设置padding-bottom: 60%; 正是我所需要的。谢谢！
在开发一些响应式 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>
【讨论】：
使用一些 javascript 很容易。
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
【讨论】：
This jQuery plugin 最近一直在流行，它被称为 FitVids，它可以满足您的需求，根据浏览器大小调整视频大小，同时保持宽高比。
【讨论】：
这些工作没有 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>
【讨论】：
制作 youtube 视频自动调整大小的技巧是将 iframe 宽度设置为 100% 并将其放入一个 div 中，该 div 的“底部填充”等于纵横比的百分比。例如
但问题是 - 您已经有很多页面嵌入了 YouTube 视频。这是一个 jquery 插件，它将扫描页面上的所有视频，并通过将 iframe 代码更改为上述内容来自动调整它们的大小。这意味着您不必更改任何代码。包括 javascript，您的所有 YouTube 视频都会自动调整大小。 https://skipser.googlecode.com/files/youtube-autoresizer.js
【讨论】：
老问题，但我认为@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>
这基本上在 768 像素处添加了一个断点，视频会在该处自行调整大小。您还可以在 992 和 1280 处添加断点，以获得更具响应性的视频大小。 （基于 Bootstrap 标准尺寸的数字）。
【讨论】：
这对我有用。这是来自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>
【讨论】：
您可以使用style="max-width: %87; max-height: %87;"
【讨论】：
除了达尔文和托德之外，以下解决方案将
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;
}
}
【讨论】：
关于使用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;
};
【讨论】：
只需使用 CSS vw 公制设置 iframe 的高度和宽度。它使用设备宽度作为参数：
.videoWrapper iframe {
height: 36.6vw;
width: 65vw;
}
【讨论】：
您可以使用两个类来根据包装 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。
【讨论】：
添加 JavaScript 代码给每个 youtube iFrame 一个类：
$('iframe[src*="youtube"]').addClass('youtube')
然后在 Media Queries 中使用 you tube 类来设置不同的大小。
.youtube {
/* Do stuff here */
}
比手动方式更容易并针对 CMS 进行了优化。
【讨论】：
iframe[src*="youtube"] {}。 As documented here