Facebook Video Embed block not sizing correctly on mobile

Site URL: https://www.bauyu.com/

Here is the page I want to embed facebook video.

https://www.bauyu.com/current-exhibition

I'm trying to use this code : 

<iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FBYARTTaipei%2Fvideos%2F363770025768375%2F&show_text=false&width=476&t=0" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe> 

It works well in desktop view, but in the mobile and tablet it looks bad. 

Please let me know how to adjust, thank you!

Hi @Bauyu

Try adding this into your Custom CSS, it will apply to all iframe embeds with a square aspect ratio

.embed-block iframe[src][height="476"][width="476"] {
  @supports (aspect-ratio: 1/1) {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1/1;
  }
}

Let me know how it goes!

1 hour ago, method said:

Hi @Bauyu

Try adding this into your Custom CSS, it will apply to all iframe embeds with a square aspect ratio

.embed-block iframe[src][height="476"][width="476"] {
  @supports (aspect-ratio: 1/1) {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
  }
  @media (min-width: 640px) {
    min-width: 476px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

Let me know how it goes!

Hello! 

It seems works in the tablet view very well, but in the mobile view still like this: 

4 hours ago, Bauyu said:

 

Hello! 

It seems works in the tablet view very well, but in the mobile view still like this: 

 

 

Hey! Try it now, I've added a couple !important's in there

Hi,

Sorry I need to change the layout of my design, the current layout looks like this:

It included two facebook video, the tablet and mobile view still needs to be adjusted.

tablet view:

mobile view:

I really appreciate your help, thank you! 

2 hours ago, Bauyu said:

 

Hi,

Sorry I need to change the layout of my design, the current layout looks like this:

 

It included two facebook video, the tablet and mobile view still needs to be adjusted.

tablet view:

 

mobile view:

 

 

I really appreciate your help, thank you! 

Thanks okay, with the new layout just remove that second part of the code (updated above) – that was purely for the tablet scaling.