如何让YouTube播放器缩放至页面宽度，并保持宽高比？

Question

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

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

我已经试过这样：

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

但这只会使玩家更广泛，不高等。

我需要诉诸JavaScript（或非标准的CSS）吗？

Answer 1

我打了一个类似的问题与我的网站开发一些响应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> 

Answer 2

This jQuery plugin近来一直在进行这一轮调查，它被称为FitVids，并根据浏览器大小调整视频大小，同时保持纵横比。

http://fitvidsjs.com/

Answer 3

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

Answer 4

对一些javascript很简单。

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

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

Answer 5

添加JavaScript代码给每个YouTube上的iFrame类：

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

然后在媒体查询用你管类设置不同的尺寸。

.youtube { 
    /* Do stuff here */ 
} 

比手动方式更容易和优化为CMS。

Answer 6

制作YouTube视频自动调整大小的诀窍是将iframe宽度设置为100％，并将其放在一个“填充底部”等于百分比宽高比的div中。例如。

但问题是 - 你将有大量的页面嵌入YoutTube视频了。这里有一个jquery插件，它将扫描页面上的所有视频，并通过将iframe代码更改为上述方式来自动调整大小。这意味着你不必更改任何代码。加入JavaScript，您的所有YouTube视频都会自动调整大小。 https://skipser.googlecode.com/files/youtube-autoresizer.js

Answer 7

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

Answer 8

老问题，但我认为@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标准尺寸的数字）。

Answer 9

除了达尔文和Todd以下解决方案将

1. 避免下边距
2. 最大化大屏幕
3. 宽度最小化移动视图
4. 高度保持固定的大小对@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; 
    }  

}  

Answer 10

这是对我工作。这是从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> 

Answer 11

你可以使用，将缩放视频的基础上，包装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在widht设置为100％和位置设置为相对。你还必须添加一个底部填充iframe包装。该填充将定义视频的高度。我建议创建两个代表图像比例的类。

计算代表特定分辨率的包装的正确底部填充非常容易。例如，对于4 RES通过3和16×9将具有底填充等于：

[4/3 RES]

4分之100* 3 = 75％;

[16/9 RES]

一十六分之一百* 9 = 56.25％

然后定位的IFRAME绝对和它推到包木窗div的左上角。另外，请确定将iframe的宽度和高度设置为100％。现在你必须做更多的事情。你完成了。

添加适合您的正确分辨率的类。它将分别调整图像的宽度和高度，以保持适当的比例。

上面的例子适用于任何病原体。这意味着你也可以使用它的谷歌地图iframe。

Answer 12

在使用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; 
};