Geek Answers Handbook

Google iFrame docs: how to set up css of embedded Google iFrame docs

I have this iframe code displaying a google documentation document:

<div itemprop="description" class="col-xs-12 no-h-padding" id="article_desc" style="margin:0 auto; width:90%; float:none;"> <iframe src="https://docs.google.com/viewer?url=http://example.com/docs/1.pdf&hl=ar&embedded=true" scrolling="no"></iframe> </div>

iFrame works fine and displays the following iFrame: Screenshot

Now I want to change the gray background, as shown in the picture above, to a white background color, I searched for a solution and I came up with this , but it doesn’t work, the background turned white (with my custom css), but google docs didn’t work, and it displayed a message saying that "something went wrong" inside the iFrame.

Does anyone know how I can change the background gray color?

EDIT It works on Google Chrome and Opera, but not on Firefox and Safari.

+7
iframe google-docs google-docs-api
source share
2 answers

I can’t say for sure whether this is a problem or not, but since it looks different in different browsers, I am inclined to believe that this is a matter of normalizing / resetting CSS. This answer has a script for this, and a few more comments, so I recommend checking it out.

+5
source share

In this scenario, the following points can be noted regarding frame styling:

  • You cannot configure an iframe loaded from another domain (cross domain).
  • It works there to create only an iframe (not iframe content), providing inline CSS to the iframe tag used.
  • You can find to hack it by first extracting the content in your domain / server, and then from there from there from there to make it the same domain and, therefore, using regular CSS and javascript.

The link below provides more detailed information and script examples that can be used in this scenario: How to apply CSS to an iframe?

+2
source share

More articles:


All Articles