I've been looking for a way to fix this, by searching here, but no fix would work for it !
I'm running into an issue with Facebook iframe video integrated on my website ! (a blog)
It's displaying ok on desktop version but, when resizing the window, or going on mobile version, there is HUGE blank space created below the iframe. It is INSIDE the iframe and I have no control over it.
Desktop version looking fine
Mobile version with HUGE blank space below
Here is the iframe :
<iframe class="iframe" style="border: none; overflow: hidden;"
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fsalutparisfr%2Fvideos%2Fvb.1523831884576352%2F1642593346033538%2F%3Ftype%3D3&show_text=0&width=400"
width="600" height="460" frameborder="0" scrolling="no"
allowfullscreen="allowfullscreen"></iframe>
Here is the CSS code :
.iframe {
display: block;
margin: 0 auto;
}
Note: changing values in the iframe code didn't do the trick
Deleting all iframe css classes didn't do it either !
Tried changing the heigh value of the iframe to "100%", this is what it turned out :
Desktop version
Mobile version
It seems like facebook iframe is broken internally ?! My Vimeo and Youtube iframes work perfectly...
Any idea about this ?
Thanks !
Related
I'm trying to embed Office365 form on SharePoint Online site via an iframe but the page shows scrollbar. I tried scrolling="no" on iframe and overflow:hidden in style but that does not help.
Did anyone come across this issue before and is there any suggested fix?
iframe{
overflow:hidden;
}
or
"width:100%;height:100%"
may be the issue. Try make size of the iframe larger than the frame window.
If this is not working, try the following line.
#s4-workspace {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
My client has a wordpress site and one page is embedding a map via iframe:
<iframe
src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"
height="350"
width="690"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe>
When I view the page in my iPhone, it renders mobile-friendly and resizes the iframe to fit the viewport, but the state and zip code are getting cut off. I tried adjusting the height of the iframe and also the bottom padding, but it seems to be something on Google's end. Any idea how to fix this? I added a blue border to my iframe so you can see that it's not the iframe which is clipping the text:
I recommend posting a link to the site or posting some of the CSS. This would make it easier for the SO community to troubleshoot the issue.
I replicated your issue by removing the iframe attribute width="690". I suspect the Wordpress CSS or some JavaScript is overriding the iframe width and cramming everything into the iPhone screen width.
To override the automatic resizing I just gave the iframe an id and set the width explicitly in my CSS.
#WidthTest {
width:690px;
}
Regardless, I'm sure you can find a similar solution by digging around the Wordpress CSS/JavaScript.
I edited the code. This works great for me! You might want to change the width according to your needs.
<iframe width="380" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"></iframe>
I have some problems when putting images in my iPhone app using PhoneGap.
According to this website the width of any iPhone screen is 320pts.
In my CSS I have the following code:
#someId {
position:absolute;
top:0px;
left:0;
max-width:640px;
max-height: auto;
}
And in my HTML file the following snippet:
<img src="image.png" id="someId" alt="">
However, if I leave it like this, the image will always be bigger than the actual screen. I'm using the iPhone 6.0 Simulator.
Changing the value of max-width to 320pt doesn't change anything.
Does anyone have experience with this?
Because so many websites are designed assuming a typical desktop-sized browser window, Mobile Safari renders pages at the default width of 980 pixels. To override this default so that it only renders websites at the width of the screen, use the following <meta> element:
<meta name="viewport" content="width=device-width">
I created a fanpage and integrated a app with width 520px. Everything works fine but the context is 5px to 10px shifts to the right and so on there is a scrollbar shown at the end of page. How can I solve this.
I know scrollbars can be hidden with overflow:hidden and inside tag <body scroll=no> but this doesn´t solve the shift to the right.
You can try using the FB.Canvas.setAutoGrow method :
Please read the Facebook JS SDK Documentation of the FB.Canvas.setAutoGrow method. In that link is an explanation on how to use facebooks auto size functions to fix these sorts of problems.
The problem seems to be that facebook fanpages tabs have a html - padding with 8px!!!! to solve this I set in css: <body style="position:relative;left:-8px;">