Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


danielkyne

Question

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
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0
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
  • 0
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
  • 0
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...