cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

I'm embedding a published google doc onto a page. How can I get the published google doc to fit the width of the iframe?

No matter what width and height I add to the embed code, the published google doc seems to have a width that does not fill out and match the iframe.  Below is a screenshot.  You can see that the desired width of the iframe is the gray box below, but the published google doc is much skinnier than the iframe (see gray box).  Below the image you can see my embed code.

353635_Screen Shot 2020-07-26 at 5.38.07 PM.png

<iframe src="https://docs.google.com/document/d/e/2PACX-1vTf0SqZhhUF9_70OHPQ-LuU6pFhB4XDc3UDZb1TBdWTG9OjlypceXW02FQzj3G7dhQLF24oTpOQ0xHz/pub" width="100%" height="400" allowfullscreen="allowfullscreen"></iframe>

3 Replies
Highlighted
Learner II

Hi karl.sain@cabarrus.k12.nc.us and welcome to the Canvas Community!  I had the same exact issue almost a year ago, so I figured I would share the advice that I received from Canvas Standard Support with you.  Hope this helps.

Hi Rebecca,

Thank you for contacting Canvas Support! I apologize you are having trouble with view of a document in your course. What you will want to do to adjust the size with HTML. You will go to the page and then click "edit", go to "HTML editor". 

This will be the code you edit:
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQjK_t81y-ueaLROz4BYFV0T94cA0DGE_UJEeQsoYg3T6k9z5D4ODak2fM7V-YrlUVL7pxgjxTiGnqH/pub?embedded=true"
You will need to insert the code width=(insert width) followed by height=(insert height)>

Here is an example you can use with the code
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQjK_t81y-ueaLROz4BYFV0T94cA0DGE_UJEeQsoYg3T6k9z5D4ODak2fM7V-YrlUVL7pxgjxTiGnqH/pub?embedded=true" width=200 height=200>

Please let me know if this works and if you have anymore questions!

Please reply if you have any additional questions.

0 Kudos
Highlighted
Community Member

Thanks for the reply Rebecca!  Unfortunately I've already accounted for that.  As shown in the screenshot, the iframe is the correct width, but the published google doc is only using the middle portion of the iframe.  See the gray box at the bottom of the screenshot to see the desired width, but the the text and tables in my document do not utilize the full width that the gray bar does.  

Here's the current HTML that I"m using that achieved that screenshot:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vTf0SqZhhUF9_70OHPQ-LuU6pFhB4XDc3UDZb1TBdWTG9OjlypceXW02..." width="100%" height="400" allowfullscreen="allowfullscreen"></iframe>

Highlighted
Learner II

Sorry about that, karl.sain@cabarrus.k12.nc.us‌.  At this point, I think you should contact Canvas Standard Support directly either by the Service Cloud or calling them if you have access to that.  I wish I could be of more help.

Labels