Vimeo 视频嵌入问题（无缩放/黑色区域）。包含示例答案

【问题标题】：Vimeo video embedding issue (no scaling / black areas). Example includedVimeo 视频嵌入问题（无缩放/黑色区域）。包含示例
【发布时间】：2012-02-05 02:34:08
【问题描述】：

我正在尝试嵌入视频电影，但它们没有被缩放并且看起来像你知道的那样。

此外，我无法在 vimeo.com 论坛上发帖。 Google 也无济于事。

这是一个例子，vimeo 电影与 YT 电影的对比：

http://jsfiddle.net/LYt3R/

有什么想法吗？

【问题讨论】：

标签： iframe embed vimeo

【解决方案1】：

我也有类似的问题。我正在实现一个移动网站，我希望根据访问者设备的屏幕分辨率进行自动缩放。

这个链接很有意思：http://webdesignerwall.com/tutorials/css-elastic-videos/comment-page-1

这是一篇完整的帖子：

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

这个解决方案并不完美，但却是我发现的更好的主意。

基本的 CSS 和 HTML 代码是：

    .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

【讨论】：