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

1. Ctrl + Shift + Del Open the “Clear Browsing Data” in chrome
2. select “Cookies and Other Site Data”
3. select “Cached Images and files”
4. Click “Clear Data”
   
   Follow the setting, then click “Clear Data” which will do.

hope it helps.

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: