Removing excessive margins from embedded Google Document iframe

Other Questions Google docs
1

I’m working with an embedded Google Doc using an iframe and running into a styling problem. The document shows up with really wide margins on both sides, making the text appear in a super narrow column that looks terrible.

app.directive('customIframeStyle', [function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attributes){
      elem.on('load', function(){
        var frameElement = elem[0];
        var targetElement = frameElement.querySelector("body");
        // targetElement comes back as null
      });
    }
  }
}]);

Applied to this HTML:

<iframe custom-iframe-style
        src="https://docs.google.com/document/d/myDocumentID/pub?embedded=true">
</iframe>

When I try frameElement.querySelector it returns null, and using frameElement.contentWindow.document gives me a cross-origin error:

Blocked a frame with origin from accessing a cross-origin frame

I tried some CSS workarounds:

iframe {
  padding: 0 !important;
  margin-left: -30px;
  margin-right: -30px;
}

But CSS targeting the iframe body gets completely ignored. I also tried old attributes like marginwidth but no luck. Is there any way to control the padding inside a Google Docs iframe or should I look for a different approach to display the document?

2

yeah, that’s a bummer. google docs iframes just don’t allow any changes in styling. checking out the google docs API could be the way to go, that way u can format everything as u want. good luck!

3

Unfortunately this is a common frustration with Google Docs embeds. The cross-origin restrictions are intentional security measures that prevent any JavaScript manipulation of the iframe content. I’ve dealt with this exact issue before and found that Google provides some URL parameters that can help reduce the margins slightly. Try adding &rm=minimal to your embed URL which removes some of the interface elements and gives you a bit more content space. Another parameter worth testing is &nochrome=true though results vary depending on the document structure. If these don’t provide enough improvement, you might need to consider alternatives like using Google Drive API to fetch the document content directly and render it yourself, or converting the document to a different format that gives you more control over the presentation.

4

I ran into this same issue about six months ago when embedding docs for a client project. The margin problem is basically unfixable through standard CSS or JavaScript due to Google’s iframe restrictions. What ended up working for me was switching to the Google Docs Viewer instead of the direct embed. You can use https://docs.google.com/viewer?url=YOUR_DOC_URL&embedded=true, which sometimes renders with better spacing, though it depends on your document format. Another approach I tested was using the Google Docs API to pull the content as HTML and style it myself, but that requires more backend work. The viewer method is probably your quickest solution if you want to stick with embedding rather than rebuilding the whole thing.