Question

我使用了facebook embed插件，它会生成一个iframe，但仅在移动设备上存在显示问题，它的宽度超过100％。

这是我的代码：

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="auto" data-show-text="true">
     <blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore">
     </blockquote>
</div>

如何在移动设备上使用100％宽度的iframe？

谢谢你，快活的xMas

Answer 1

有使用包装元素的解决方法：

.fb-wrapper {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.fb-wrapper iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="fb-wrapper">
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FGoogleDE%2Fvideos%2F801609183514998%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

它使用填充作为技巧来维持比率：
padding-bottom = (height / width) * 100%。

您需要计算嵌入比例以使其正常工作。在我的示例中（宽度=“ 560”高度=“ 315”），该比率的计算方式如下：
315px / 560px = 0.5625 = 56.25%

信用：我从snippet by Valentin Garcia复制了一次。

如何将Facebook嵌入视频设置为100％宽度

1 个答案: