javascript - 试图让 iframe 与 vimeo 播放器一起缩放

Question

所以我目前正在为某人开发一个网站。他是一名电影摄影师，因此他的网站主要展示视频。他将这些视频托管在 Vimeo 中。我有一个点击功能，如果您点击视频列表，它会在 iFrame 中加载特定视频。我遇到的问题是 iFrame 无法在不同分辨率的屏幕上缩放。所以我可以让它在普通的 MacBook 上看起来很漂亮，但是当涉及到 ipad 或更小的屏幕时，它会给我这些奇怪的黑色边框。所以我很好奇是否有人知道我可以实现什么来让它随框架缩放？

Answer 1

http://jsfiddle.net/DerekL/4GNMd/

<div class="container">
    <div>
        <iframe src="//player.vimeo.com/video/32346156?title=0&byline=0&portrait=0&color=d0e774" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

div.container {
    position: relative;
    width: 80%;
    padding-bottom: 45.1%;
}

div.container > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

div.container > div, iframe{
    width: 100%;
    height: 100%;
}