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

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?

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?

you can customize some Css codes in Design > Custom Css

Hope it is helpful for you!

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

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.

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?