Jump to content

How do I hide the partial border that Squarespace adds to iFrames?

Recommended Posts

Site URL: https://opinionx.co

I use iframes throughout our Squarespace site to embed interactive product demos, GIFs and videos.

On our main landing page (https://opinionx.co), we use an autoplay video with a white background that is intended to blend into the overall site background. For some users, however, Squarespace seems to add a border to 2 of the 4 sides of the iframe. I've tried a few tricks (overflow, frame border) but nothing seems to get rid of it.

4th screenshot is of an embedded stack ranking survey, where the border should all be light grey but that 2 sided dark border pops up again (like on the video iframe). 

Anyone able to help?

Screen Shot 2021-09-07 at 4.57.52 PM.png

Screen Shot 2021-09-07 at 5.01.57 PM.png

Screenshot 2021-09-07 at 20.28.20.png

Heavy Border.PNG

Edited by danielkyne
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

1 hour ago, danielkyne said:

Site URL: https://opinionx.co

I use iframes throughout our Squarespace site to embed interactive product demos, GIFs and videos.

On our main landing page (https://opinionx.co), we use an autoplay video with a white background that is intended to blend into the overall site background. For some users, however, Squarespace seems to add a border to 2 of the 4 sides of the iframe. I've tried a few tricks (overflow, frame border) but nothing seems to get rid of it.

4th screenshot is of an embedded stack ranking survey, where the border should all be light grey but that 2 sided dark border pops up again (like on the video iframe). 

Anyone able to help?

Screen Shot 2021-09-07 at 4.57.52 PM.png

Screen Shot 2021-09-07 at 5.01.57 PM.png

Screenshot 2021-09-07 at 20.28.20.png

Heavy Border.PNG

you can customize some Css codes in Design > Custom Css

Hope it is helpful for you!

.w-video-wrapper {
  background-color: transparent !important;
}

image.thumb.png.8be18eb23bc4348bb17dc09220801323.png

Edited by HoaLT
Link to comment
27 minutes ago, HoaLT said:
.w-video-wrapper {
  background-color: transparent !important;
}

Considering this is an iframe rather than a video embed block from Squarespace, I don't see why that would work?

I've tried the same CSS with a few different .tags, such as .iframe and .wistia_responsive_wrapper (as that is what the div is called in this case) but none make any difference.

Link to comment
6 minutes ago, danielkyne said:

Considering this is an iframe rather than a video embed block from Squarespace, I don't see why that would work?

I've tried the same CSS with a few different .tags, such as .iframe and .wistia_responsive_wrapper (as that is what the div is called in this case) but none make any difference.

Does it work for you? you mean that you are not clear about the way Css code fix your problem?

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.