Modifying Padding in a Google Docs iFrame Embed

Other Questions Google docs
1

I embed a Google document in an iframe, but it applies padding. My ‘iframeCustomStyle’ directive cannot adjust styling due to cross-origin rules. How to remove padding?

app.directive('iframeCustomStyle', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('load', function() {
        var frameElem = element[0];
        var innerDoc = frameElem.contentDocument || frameElem.contentWindow.document;
        if (innerDoc) {
          innerDoc.body.style.padding = '0px';
        }
      });
    }
  };
});
2

I encountered a similar issue when embedding a Google Doc in an iframe and struggled with the built-in styling. Since the cross-origin policy restricts direct manipulation of the inner document, my solution was to bypass the internal padding by modifying the URL parameters. Using the embedded=true flag in the URL produced a much cleaner rendering without extra padding. In addition, I wrapped the iframe in a container element and adjusted its margins and size to control the visual layout better. This approach proved reliable across devices and screen sizes.

3

A potential workaround I’ve discovered is to forgo adjusting the embedded document altogether and instead modify the iframe’s container styling. Rather than trying to change the inner document styles, I restyled the parent element to neutralize the appearance of unwanted padding. In my project, I also experimented with proxying the content to embed a sanitized version, though that solution added extra complexity. Ultimately, I found that focusing on the outer layout and using Google Docs published view settings to limit internal formatting provided a more reliable and simpler solution.

4

hey, i ended up using a reverse proxy to serve the doc so i could inject my own css and remove unwanted padding. its a hacky workaround but gives full control. be careful with security tho!