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

How do I get this iframe embed link to display?

Question

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>




Edited by Jeng

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1

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>

Adding code to an Embed Block

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.

Edited by alxfyv
Tidy, update from comments

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...