如何将Facebook嵌入视频设置为100％宽度 [英] how to set a facebook embed video to 100% width

问题描述

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

I use the facebook embed plugin and it generates an iframe but I have a display issue only on mobile, It takes more than 100% width.

这是我的代码:

<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怎么办?

What can I do to have a 100% width iframe on mobiles devices ?

谢谢你，快活的xMas

Thank you, Merry xMas

推荐答案

使用包装元素有一种解决方法:

There is a workaround using a wrapper element:

.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 =(高度/宽度)* 100％.

It uses padding as a hack to maintain ratio:
padding-bottom = (height / width) * 100%.

您需要计算嵌入比例，以使其正常工作.在我的示例中(宽度="560"高度="315")，该比率的计算方式如下:
315px/560px = 0.5625 = 56.25％

You need to calculate the ratio of your embed to get this to work. In my example (width="560" height="315") the ratio is to be calculated as follows:
315px / 560px = 0.5625 = 56.25%

信用:我从Valentin Garcia的摘录一次.

Credit: I copied this from a snippet by Valentin Garcia once.

这篇关于如何将Facebook嵌入视频设置为100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！