缩放iframe以适当地适合

因此，我使用我的website中的iFrame来显示视频，并将它放在div中以允许调整移动sties的大小，并使其更具响应性等。但是现在，如果显示器iframe中的内容被截断。缩放iframe以适当地适合

下面是IFRAME代码：

<div class="wrapper"> 
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 
<style> 
.wrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
</style>

如果任何人都可以看到任何可能导致此行为那么我很想知道。

感谢

编辑：这里是我试图缩放DIV的代码。宽度不会随着页面缩小而改变，因此高度也不会改变。任何想法？

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

来源

2015-07-13 dwinnbrown

我还没有尝试过，但你可能看看http://embedresponsively.com/ – bmurauer

@bmurauer感谢您的建议，但它基本上做同样的事情，问题没有解决。我无法向下滚动。 – dwinnbrown

你想在小屏幕上显示视频吗？还是包括标题在内的一切？ – NateW

的问题是，您的包装股利.splash-page .main-wrap设置为position: absolute;和overflow-y: hidden;这不允许股利成长，以适应您的所有内容。

如果你改变你的CSS，包括这样的事情：

.splash-page .main-wrap { 
    overflow-y: visible; 
    position: relative; 
}

它将使DIV增长，以适应您的所有内容。

如果您只想定位一个特定的宽度，您也可以将所有内容包装在媒体查询中。

@media all and (min-width: 1001px) { 
    ... 
}

目前你还会因为你既上一个div和你的身体标记使用.wsite-background有一个复制的背景问题。如果你从你的身体标记中删除这个类，它应该看起来更好。

来源

2015-07-13 13:56:49 NateW

谢谢，我刚刚在几分钟前发现了我的代码，但在此处将标记为其他用户正确。 – dwinnbrown

你有任何想法如何缩放显示iframe的div吗？我将在上面添加div代码。 – dwinnbrown

@dwinnbrown您的iframe响应我的行为......（Safari和Chrome测试）您使用的浏览器是什么？ – NateW

你的iframe有固定的。尝试使用WIDTH =“100％”，而不是WIDTH =“960”

来源

2015-07-13 14:04:16

缩放iframe以适当地适合

回答

相关问题