Hi everyone,
I've scoured the forums trying to find a solution to my problem.
Here's the sample page I'm working on: https://www.mydryeyedata.org/symptoms-list/how-it-started
I'm trying to embed an iframe element on my site (on a blog post, actually). I created a survey and want to have a blog post for summary data of each question, which is accessible by an embeddable link provided by the survey platform, which should go to this page: https://www.questionpro.com/t/ZRhJQhZGgEqYG.
<iframe src='https://www.questionpro.com/t/ZRhJQhZGgEqYF' width='100%' height='600' frameBorder='0'></iframe>
When I'm editing in Safari or in a private tab, I just see empty boxes. I tried chrome and once I allowed unsafe elements I got the grey frowny face saying "www.questionpro.com refused to connect". I've contacted them about why their embed isn't working, but I haven't ruled out that this is a Squarespace issue.
Things I've tried:
I know the url is https
Putting the above code into a code block doesn't work; frowny face.
Putting the url in an embed block says it's not valid.
Using specific code in the embed block and adding custom CSS also doesn't work; small box and frowny face. I tried the following per a few help articles (e.g. https://answers.squarespace.com/questions/69710/why-cant-i-interact-with-iframe-content.html)
Code in embed block (grey < / >):
<div style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="https://www.questionpro.com/t/ZRhJQhZGgEqYG"></iframe>
</div>
Custom CSS: (is height: 100% valid? I'm embedding like 100 iframes on my site, and some are a lot taller than 600px. I could also choose some random value)
my-iframe iframe {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-style: none;
/* to ensure proper scrolling and overflow handling on
mobile devices, put this styling in a div wrapper around the iframe
because it's unreliable in css:
-webkit-overflow-scrolling: touch;
overflow: auto;
*/
}
Since chrome says www.questionpro.com refuses to connect, I've contacted them. I'm not sure if they'll be able to solve anything or if this is a square space issue. Btw when I put the embed code provided into something like https://html5-editor.net/ it also doesn't work, leading me to think that it's a QuestionPro problem.
@alxfyv @Jay Wilson Jr @raptra @alxfyv
Thanks in advance, I'll be sure to provide updates and let everyone know what worked.