How do you change the size of an embedded Google Doc?

Jump to solution
Community Member

You used to be able to drag and make Google Docs larger, but in the past 4-6 months it changed and you are no longer able to do that in the rich content editor. Now you have to use HTML and guess what size you want the document. Why is it not working any longer?

3 Solutions
Community Champion

 @thall39 r,

Can you get at the HTML? You need to put a width and height on the <iframe>. 

<iframe width=600 height=500 src=......>


View solution in original post

I have never seen that happen,  @rmerrill ‌. Please check out Using Google Docs for dynamic Canvas content‌ for additional discussion of how to embed Google Docs in a Canvas page.

View solution in original post

Community Novice

After playing around with this for awhile, this is what I have found. Adding the height and width code does work, but it takes a LONG time for changes to show up. To make changes show up automatically, I had to go about it in an entirely different way.

Instead of publishing, I embedded it as if it were a video (and then changed the html code). It takes more steps, but I ended up liking the result a lot more (and for more reasons than just the automatic updates). See below for the steps. 

1. Get the share link from the google doc

2. On Canvas Page, click to insert media

3. Paste the share link, but change the last part of the link 
CHANGE /edit?usp=sharing TO  /preview?pli=1
*Note = this is what puts the document into preview mode and show up on the page correctly

4. Change the dimensions
*Note = I recommend width = 100% Height = 600

5. Click Okay

6. Click HTML Editor

7. Adjust code 
change video to iframe, delete controls, extra bracket, and source
*Note = The document will not show up without these changes



<p><video width="100%" height="600" controls="controls">
<source src="https://yourgoogledocshareaddress/preview?pli=1" /></video></p>


<p><iframe width="100%" height="600" src="https://yourgoogledocshareaddress/preview?pli=1" /></iframe></p>

8. Save

View solution in original post