如何使YouTube播放器缩放到页面宽度，同时又保持宽高比?

问题描述

我有一个YouTube视频要放在我的网页上.

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

我想缩放视频以使其适合用户浏览器的百分比，而且还要保持宽高比.

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

我已经尝试过了:

<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.

我必须求助于JavaScript(或非标准CSS)吗?

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

推荐答案

在开发一些响应式CSS时，我的网站遇到了类似的问题.从台式机CSS切换到较小的对象时，我希望所有嵌入的Youtube对象都能够按比例调整大小(我使用媒体查询来为移动设备重新呈现内容).

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中有三个视频类:

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

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

...我将其中之一分配给所包含的YouTube内容，具体取决于其原始大小(您可能需要更多的课程，我只是选择了最常见的大小).

… 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).

在针对较小设备的媒体查询CSS中，这些相同的类只需按如下方式重新设置即可:

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

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

我很高兴在将视频包含到HTML中时(例如添加一个类)，这需要一些预先"标记，但是如果您不想沿用Javascript路线，那么效果很好-您可以根据需要重新设置视频类别的大小.这是Youtube标记的外观:

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:

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

这篇关于如何使YouTube播放器缩放到页面宽度，同时又保持宽高比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！