how to set a facebook embed video to 100% width

问题

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.

Here is my code :

<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>

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

Thank you, Merry xMas

回答1:

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>

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

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%

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

来源：https://stackoverflow.com/questions/53870037/how-to-set-a-facebook-embed-video-to-100-width