How to style facebook iframe with css?

Question

I have a popup which contains the facebook iframe and its seems like the inline stylesheet method in not work

<div data-html="allow" >
<iframe style="border: 0px;  display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>

I am trying to increase the width and height of the iframe but its not work.any clue?

Any help is appreciated. thanks,

so you should try this. Give the iframe a class or try to select it using selector. Set the height you want along with `!important` and see if anything change — Toan Lu, Jun 19 '18 at 12:14
You can't style what Iframes is loading, it's an external page with it's own stylesheet and everything [take a lookat this](https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe) — Rainbow, Jun 19 '18 at 13:58

score 0 · Answer 1 · answered Jun 19 '18 at 12:13

I'd use JS for this, like so:

<div data-html="allow" >
<iframe id="iframe1" style="border: 0px;  display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>

<script type="application/javascript">

function resizeIframe {

    iframe.width  = iframe.contentWindow.document.body.scrollWidth;
    iframe.height = iframe.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iframe = document.getElementById( 'iframe1' );
    resizeIframe;

} );

</script>

Nops! its not working but thanks for your efforts sir – webdec dron Jun 19 '18 at 12:17 — webdec dron, Jun 19 '18 at 12:17

How to style facebook iframe with css?

1 Answers1