We Keep Coding

Facebook iframe not loading on my website. How do I fix it?

I'm trying to add an iframe to the right hand side of my webpage, but for some reason the iframe won't load when I refresh the page. I tried looking at my developer tools in Google but all I saw was that there was a style property added to my iframe that says,
"display: none !important". I don't know if this is what is keeping it from loading, but that is all I can think of. I looked at other suggestions, but they didn't fix the problem.
I also don't know how to get rid of the display property if it is the issue. I don't have any compiling issues. I'm creating this website with React and I'm trying to display my facebook account with an iframe on the right hand side of my webpage. I could really use some help with this. Here is my React code:
import React from 'react';
import "./Widgets.css";
function Widgets() {
return (
<div className="widgets">
<iframe
title="widgets"
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100009419984981&tabs=timeline&width=340&height=1500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
width="340"
height="1500"
scrolling="no"
frameborder="0"
allowfullscreen="true"
style= {{ border: "none", overflow: "hidden" }}
allow="encrypted-media">
</iframe>
</div>
)
}
export default Widgets;
Screenshot of styles affecting the iframe:

Okay, I can't really tell your problem because when I recreate it I get different results:
Link to Codepen here: https://codepen.io/cypherjac/pen/xxpgGLQ Iframe Codepen
That is most likely some external script or style affecting it
I've copy-pasted the exact code from that link you've mentioned and this is what I get..
Check the codepen for the demo
As I said, check your styles sources and search for the word iframe to find a style that could be affecting it

I had the same problem, then I realized Google Chrome is not able to load it, it is heavy. Try Google Incognito, you will see it perfectly working/loading.

I'm using iframe for Facebook Embed Post
If using Normal Chrome iframe, NOT working!
If using Incognito Mode in Chrome, it works!
If using Edge, it works!
If I use my friend's PC chrome, it Works!
** Problem is the chrome cache issue
Solution
Ctrl + Shift + Del Open the "Clear Browsing Data" in chrome
select "Cookies and Other Site Data"
select "Cached Images and files"
Click "Clear Data"
Follow the setting, then click "Clear Data" which will do.
hope it helps.

Youtube embedded video does not work on chrome

For months I've been noticing embedded youtube videos appear white on any other page, now I found out that I can watch those videos by inspecting the page and putting -nocookie at the hostname of the iframe src, i.e. https://www.youtube-nocookie.com/embed/(VIDEO_ID).
I want to know why this happen and how to fix it, my first thought was to make an userscript to change it in every page.
EDIT: It works fine on Edge and Firefox but not on Chrome, even though my settings for cookies are enabled.
SOLUTION: The problem was that my userscript on Tampermonkey extension (which was supposed to affect the youtube page) was affecting every page with an embedded video, from now on I can figure it out what part of the code was doing that but for now it's turned off.
Thanks to #JasonB for the suggestion about extensions.

This -nocookie url came out almost a decade ago when cookies were still often turned off. This codepen shows that the standard youtube embed code works just fine on a simple site.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/9Ht5RZpzPqw" frameborder="0"
gesture="media" allow="encrypted-media" allowfullscreen=""></iframe>
https://codepen.io/anon/pen/baqdGz
Are there any details about your domain or a link to a broken embedded video on your site that might help us better troubleshoot your issue?
The thumbnail worked just fine, I left it open for 5 minutes and then played the video, and that is all functional. Looks like there's one js error related to the codepen setup - not what you're experiencing.

PDF inside iFrame not working on iOS

I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.

If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js

How to load in a webpage and then click on an element in that webpage?

I wand to make a 'Google Searcher' that loads Google as an element of a webpage, inputs my search term and then presses search, i'm not sure if I am on the right path here but this is all I have:
<div>
<object type="text/html" data="http://www.google.co.nz/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
</object>
</div>
If you cant help with my original question could you please explain why that isn't working with Google?

Don't do this. It's against Google's ToS:
1.4 Appropriate Conduct.
You shall not, and shall not allow any third party to: [..] (i) directly or indirectly generate queries, or impressions of or clicks on Results, through any automated, deceptive, fraudulent or other invalid means (including, but not limited to, click spam, robots, macro programs, and Internet agents);
Why not just set up a custom search?

Display Facebook like box in PhoneGap in the same WebView / page?

How can I display a Facebook like box in PhoneGap in the same WebView / page as the remaining web application? I want to display a Facebook like box in a PhoneGap application (using jQuery Mobile).
PhoneGap opens a new browser window / webview for the Facebook like box.
Same situation with other Facebook social plugins. I want the like box to be part of the normal content on that page, not open a childbrowser or so. Either of both variants (FBXML [1] & iframe [2]) displays nicely in the same page on desktop browsers, but PhoneGap opens them in a new window, thereby leaving the application.
Any suggestions?
[1]:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
[2]:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>

Openeing iframes requires the domain to be added to the ExternalHosts key in PhoneGap.plist. Then the external page like Facebook show up in the normal content.
"You'll have to add the domain under the ExternalHosts key in PhoneGap.plist." link