Jump to content

Facebook Video Embed block not sizing correctly on mobile

Recommended Posts

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!

 


 

001.jpg

002.jpg

Link to comment
  • Replies 5
  • Views 586
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

Edited by method
Link to comment
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: 

 

 

004.jpg

Link to comment

 

Hi,

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

image.thumb.png.12be1cc026662aae58aa3559df467dfc.png

 

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

tablet view:

image.thumb.png.2a671ca5467c532de842ed4273fd8d36.png

 

mobile view:

image.thumb.png.d79838d264039b4245d2f06a2bd44c33.png

 

 

I really appreciate your help, thank you! 

Link to comment
2 hours ago, Bauyu said:

 

Hi,

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

image.thumb.png.12be1cc026662aae58aa3559df467dfc.png

 

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

tablet view:

image.thumb.png.2a671ca5467c532de842ed4273fd8d36.png

 

mobile view:

image.thumb.png.d79838d264039b4245d2f06a2bd44c33.png

 

 

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.