Embedded frame size adjustable?

Jump to solution
jeanderson3
Community Participant

I have a question about embedding a pdf into a page. I understand how to add a file link, and have that link auto-preview in the page, but my question goes beyond this functionality. When I select 'auto--open', the iframe on the page is limited to a certain size. The size doesn't seem to be editable from my early exploration in html editing.

Here's a screenshot of the frame size...

The frame that contains the embedded pdf file seems to be restricted in size...

My question is simply: Can the size of the frame be adjusted in some way to result in the embedded pdf being fully visible, rather than fixed/scrollable? In essence, I'd like to remove the scrolling from the embedded file so that my students read a topic preview in plain text, then see the entire pdf file as the 'body' of the page, rather than having to scroll through the pdf link.

Any ideas?

1 Solution

You could try this code just put in your src url in between the quotes. This should give you a window that expands and contracts with the browser width in proportion

<div style="position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="" ></iframe>
</div>

if you want the object slightly smaller (60% width) you could try this:

<div style="position: relative; padding-bottom: 33.75%; padding-top: 0px; overflow: hidden; width: 60%; height: 60%; left: 20%; right: 20%;">
<iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;" src="" ></iframe>
</div>

I usually use this code to embed video but it should work with your PDF 

View solution in original post