Embedding your document in an iframe

Tips & Tricks
21

Drop box will actively block you opening the link within an Iframe. Sorry I tested this the other day and forgot to post it.

22

By the way if you just want a down load link the you use a button that will open a url to the link.
on the link you provided change :

to

23

Hi Mark,
thanks for the Info but I have to display the pdfs within a smaller iframe.
I guessed it, that Dropbox does something to make life complicate.
No, I think, I will keep the pdf library at another posters server and skip Dropbox.

24

Dropbox really isn’t a great solution for anything other than quick tests and shares.

I’d suggest signing up for an AWS S3 bucket if you actually need to host static assets. Reliable and costs nearly nothing.

25

For a longer scroll experience that has key areas that animate-in based on "Enter ViewPort", are there other approaches that I'd need to take when having the content load inside an iframe? Currently, if I make the iframe the height of the interactive piece, everything animates immediately (since I'm assuming that the iframe is operating as the viewport, right?). If I shorten the iframe height, then the area outside of the content stays hidden until scrolled to. I'd ultimately like the user to not have to scroll inside an iframe within a web page that additionally scrolls.

Original/intended experience:
https://c.davisandco.com/embed/change-leaders-tips2/change-leaders-tips2.html

When iframe is set to height of the piece, regretfully everything animates in all at once:
<iframe src="https://c.davisandco.com/embed/change-leaders-tips2/change-leaders-tips2.html" height="3000" width="800" style="border:none;" frameborder="0" scrolling="no"></iframe>

If I cap the height, then the content outside of the iframe animates in properly:
<iframe src="https://c.davisandco.com/embed/change-leaders-tips2/change-leaders-tips2.html" height="700" width="800" style="border:none;" frameborder="0" scrolling="yes"></iframe>

All insight is greatly appreciated!

26

Are you unable to embed this directly on the page? Before getting too deep in the weeds on this, that's what I would recommend.

You would just need these lines of code on the page:

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300&subset=latin' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:600&subset=latin' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200&subset=latin' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&subset=latin' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:600italic&subset=latin' rel='stylesheet' type='text/css'>
	
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
	
<div id="dcomktgchangeleaderstipsinfographicv2_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:4740px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="https://c.davisandco.com/embed/change-leaders-tips2/DCo_Mktg_Change_LeadersTips_Infographic_v2.hyperesources/dcomktgchangeleaderstipsinfographicv2_hype_generated_script.js?80638"></script>
	</div>
1 Like
27

Thank you, Daniel! I'll try that out. We are trying to get the experience to work in the Unily CMS.

1 Like
28

This worked! Thank you so much!

1 Like