Modifying the background color of an embedded Google Docs viewer

Other Questions Google docs
1

I’m trying to embed a Google Docs viewer on my website, but I’m not happy with how it looks. The default grey background is a bit dull. I want to change it to white to match my site’s design better. Here’s what I’ve got so far:

<div id="doc_container" style="width:90%; margin:0 auto;">
  <iframe src="https://docs.google.com/viewer?url=https://example.com/sample.pdf&embedded=true"></iframe>
</div>

This displays the document fine, but I can’t figure out how to change the background color. I tried adding some CSS to target the iframe, but it either doesn’t work or breaks the viewer completely.

Has anyone successfully customized the appearance of an embedded Google Docs viewer? I’m particularly interested in changing the background color, but any tips on styling would be helpful.

I’ve noticed the behavior is different across browsers too. It seems to work okay in Chrome and Opera, but Firefox and Safari are giving me trouble. Any ideas on how to make it consistent across all browsers would be great!

2

I’ve tackled this issue before, and unfortunately, Google Docs viewer doesn’t offer much in terms of customization. The iframe content is served from Google’s servers, making direct styling challenging. A workaround I’ve used is to create a container div with the desired background color and set the iframe to have a transparent background. Something like this:

<div id="doc_container" style="width:90%; margin:0 auto; background-color: white;">
  <iframe src="https://docs.google.com/viewer?url=https://example.com/sample.pdf&embedded=true" style="background: transparent;"></iframe>
</div>

This approach worked consistently across browsers for me. If you need more control, consider using a different PDF viewer library that allows for more customization. PDF.js is a good alternative that offers more styling options.

3

hey, i’ve run into this too. sadly google doesn’t let us change much :frowning: have u tried other options? i use PDF.js now and it’s way better for customizing. u can style it however u want and it works great across browsers. might be worth checking out if ur still stuck!

4

I’ve dealt with this issue in a few projects, and it can be frustrating. While Jack81 and Luna23 offer solid advice, I found another workaround that might help. Instead of using the Google Docs viewer, I’ve had success with embedding PDFs using object tags. Here’s a snippet that’s worked well for me:

<object data="https://example.com/sample.pdf" type="application/pdf" width="100%" height="600px">
    <p>Your browser doesn't support PDFs. 
    <a href="https://example.com/sample.pdf">Download the PDF</a> instead.</p>
</object>

This method gives you more control over styling and works consistently across browsers. You can easily set the background color of the containing div. It’s not perfect, but it’s been a reliable solution in my experience. Just make sure your server is configured to serve PDFs correctly.