How do I get this iframe embed link to display?

I’m trying to get the below iframe html code to embed on my site and can’t get it to display, I just get the pixilated sad-face image. I have tried to embed it via the embed link as well as via the code box. Any ideas?

Any help would be greatly appreciated.

<iframe src="http://files.flipsnack.com/iframe/embed.html?hash=ftc9atkz0&wmode=transparent&t=1419311310" width="100%" height="100%" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

First, modify the iframe opening tag to omit all the attributes except the href. Style the iframe with CSS not with inline styling.

Second, wrap the iframe with a div as follows and add to an Embed Block:

<div id="my-iframe" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;"><iframe></iframe>
</div>

We would ordinarily put the scrolling and overflow properties in a separate CSS file, but in this case they are not reliable in CSS, so we’re left with inline styling for them.

Third, add to your custom CSS the following:

#my-iframe iframe {
 height: 600px;
 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;
*/
}

Depending on the height of your source, 600px may be too much or too little. In the CSS, adjust the height until the iframe is just tall enough to contain the whole of your source without scrolling. Of course if you want vertical scrolling you can make the height smaller. You can try height: 100%; to see if it works but for me it didn’t.

I have an iframe on my site (www.familyhistoryconferencenwa.org) and found that if I used height: 100% I got, for a reason I could not fathom, a frame of approximately 200px high.

If you decide you want a border set border-style: solid; or whatever border style you decide upon.

This is the code that works for me. Let me know if it works for you.

Fixed, thank you! Thank you for your help!

Hi!

I'm having the exact same issue, I must be doing something wrong as I tried but failed to use your method.

The code I'm trying to embed is the following:

<iframe src='http://feeds.artistdata.com/iframe.shows/artist/AR-6D178F0B72B3C498/iframe' height='300' width='500' frameborder='no'></iframe>

I took the http://feeds.artistdata.com/iframe.shows/artist/AR-6D178F0B72B3C498/iframe

and added

<div id="http://feeds.artistdata.com/iframe.shows/artist/AR-6D178F0B72B3C498/iframe" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;"><iframe></iframe>
</div>

to an embed block, then copied your exact code

#my-iframe iframe {
 height: 600px;
 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;
*/
}

into my custom CSS, but still not working, could you very kindly let me know what I did wrong?

Thank you!

Hi Steve (@alxfyv), could you clarify the first two steps in your method?

Hello tryng to confirm that i can get a Chatwing chat room embedded into a Squarespace page.

Hello tryng to confirm that i can get a Chatwing chat room embedded into a Squarespace page.