Solution 1 :

Okay, I can’t really tell your problem because when I recreate it I get different results:

enter image description here

Link to Codepen here: 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

Solution 2 :

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.

Solution 3 :

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


  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”
    enter image description here
    Follow the setting, then click “Clear Data” which will do.

hope it helps.

Problem :

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">
        style= {{ border: "none", overflow: "hidden" }}

export default Widgets;

Screenshot of styles affecting the iframe:
enter image description here


Comment posted by Cypherjac

Try checking whether other internal or external scripts you’re using are affecting your iframe, because I’ve tested and it works without the none display property

Comment posted by Adam Breslin

@Cypherjac how do I get rid of the none display property? I don’t know how to do it.

Comment posted by Cypherjac

Have you tried adding this property to the style:

Comment posted by Adam Breslin

@Cypherjac I tried that, but it didn’t work.

Comment posted by Cypherjac

Send a screenshot of the styles affectng the iframe, it’s not possible to identify the issue without mmore information

Comment posted by

What do you think I should do? I got the facebook iframe from this website:

Comment posted by Cypherjac

Check, edited answer … This is up to you to do some searching on all the styles sources being loaded in your page

Comment posted by Adam Breslin

I don’t know what you mean by style sources. I already showed you all the styles that I added on my javascript file? Where would style sources be located at?

Comment posted by Ask Question

This does not really answer the question. If you have a different question, you can ask it by clicking