video - 修复480中iframe 853中的YouTube黑色边栏

Question

当使用生成的iframe嵌入youtube上的高清视频时，我注意到在使用预设时会在播放器中添加两个黑色的侧边栏。

<iframe width="853" height="480" src="http://www.youtube...

例如: http://www.villagedurable.org/tv如果我插入尺寸为640 * 360的iframe或使用HD尺寸1280x720，则会消失两个侧边栏，以实现精美的布局。

的确是640 * 360和1280x720均使用1.777777777777778的宽高比，将480乘以1.777777777777778得出853.3333333333333，我认为这会使youtube添加此讨厌的黑色线条:(

Answer 1

经过大惊小怪，我终于找到了解决方案。

显然，因为853x480与16/9的比例不完全相同，因此播放器没有自动消失的控件。因此，视频控件将占用您宽度的30像素，而仅保留450像素的高度。为了保持宽高比，视频会缩小，因此会出现黑色边框(或黑色边栏，无论您如何称呼它们)。

解决方案是在iframe中使用853x510作为尺寸:

<iframe width="853" height="510" ... />

恕我直言，这是YouTube的错误，因为它们在“嵌入代码”选项中提供了853x480作为预设分辨率。

从 http://www.h3xed.com/web-and-internet/embedding-youtube-videos-in-hd:

Of the four resolution options YouTube shows you on the embed dialog (for 16 x 9 videos), 853 x 480 is the only one that doesn't load in the player with the fade-away controls. This is because 16 x 9 does not go into 853 x 480 evenly. So you'll notice that there will be black bars on the sides of the 16 x 9 video. To actually play an 853 x 480 video in an embedded YouTube player, you'll want to choose 853 x 510 as the width and height in the embed code.