Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Participant

Adjust display height of embedded pdf in html page?

For two of our classes, our school uses e-textbooks in pdf format for instruction. The textbook files are uploaded to the course file folders and then linked to wiki pages for the student to view as they go through the course. The process works fine so far but I would like the embedded pdf to display in the window with a larger height. Here is what one of our embedded files looks like currently:

pdf viewer height.JPG

I've been trying to add height commands to the html code to designate a specific height desired for the display box, but have been unsuccessful to this point. Here is what the html of the above embedded file looks like:

embed pdf html code.JPG

Is it possible to insert a "height" command somewhere in the code that would affect it's display attributes, or is that not possible for this particular file item?

Thanks for any help!

4 Replies
Instructure Alumni
Instructure Alumni

 @rulven ​, it looks like you're using the auto-open for inline preview functionality when you upload the PDF file to the page, which creates a preview box of a predefined size. As an alternative, do you have the wherewithal to put the e-textbook PDFs in Google Drive, publish the documents, and harvest embed code from there? This will give you far greater flexibility on how the documents present in the pages. For more discussion of this, please refer to Using Google Docs for dynamic Canvas content​.

Community Participant

Hi Stefanie,

That's a great suggestion. I'll experiment with a chapter file and see if I can size it the way I prefer. Smiley Happy

I'm not adding the documents to Google Docs, but using the Google Docs Viewer to embed/display an external doc in the Canvas page.


This is probably something being phased out by Google Docs, but there was the Google Docs Viewer from which you could reference a file, PDF, DOC, etc. and embed it in your web page.  WordPress even had a plugin to make this simple.  I just went online and see that the viewer functionality is still there, just not easy to find.  The problem that I had was that the PDF (or other document) needed to be available to the public (no authentication required to access it) for the Google Docs Viewer to work.  That normally negates documents saved in an LMS course, which requires authentication for access to the site.

I found a PDF online and added it to the coding above and then pasted that coding in a Canvas web page via HTML view.  It works fine, and you have the option to modify the width and height of the embedded viewer.

New Member

I agree. There should be an easier way to change the embedded document's height and width in the HTML Editor.... Has someone already suggested this as an idea to improve canvas? 

I tried just adding a width and heigh command to the auto-in-line-preview syntax, but it didn't work... 

<p><a class="instructure_file_link instructure_scribd_file auto_open" title="Nine Things You Should Already Know About Plagiarism.pdf" href="" data-api-endpoint="" data-api-returntype="File">Nine Things You Should Already Know About Plagiarism.pdf</a></p>

width="100" height="400"
0 Kudos