Embed Dropbox website to an HTML website

Question

This is my current website: http://acrossuhubsubmissions.tumblr.com/ . As you see, I'm using iFrames to embed part of the Dropbox onto my tumblr website. The Dropbox page is a public sharing page. The html code that I'm using to display the Dropbox:

<left>
<iframe src ="https://www.dropbox.com/sh/d9ulw65twvxrrhi/AACHsXLlXUSan4Zx4hGC8BDja?lst"  width="777px" height="777px"   scrolling="yes"  >
  <p>Your browser does not support iframes.</p>
</iframe></left>

I used the exact same code for the Google speadsheet webpage, and that seemed to show up. Does anyone know why the Dropbox webpage isn't showing up on my tumblr page?

Answer 1

I was able to embed a Dropbox video like this; First, create a share link to the video, then modify the link by changing the ?dl=0 at the end to ?raw=1 and then using this code...

<iframe width="800" height="450" 
src="https://www.dropbox.com/s/nwg6px2i8si18w9/Oh%20Deer%21.mp4?raw=1
&autoplay=1" frameborder="0" allowfullscreen></iframe>

NOT recommended for high bandwidth uses, as you might be banned from Dropbox (read this https://www.dropbox.com/help/security/banned-links.)

Answer 2

It is not possible to display that dropbox link in an iFrame not originating from outside the dropbox.com domain. The reason why is because they include the following header in their response:

X-Frame-Options SAMEORIGIN

see https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options for more information on this header. Browser supporting this flag will not load the content in an iframe.

See the documentation on dropbox how to user their api to embed content: https://www.dropbox.com/developers/dropins

Answer 3

Better use OneDrive, it gives you embed link. [I know it's an old question but it might be helpful if you didn't knew it already]

Answer 4

You can use the "public link".

Copy the file into the dropbox public folder and now you can use the public link to embed in a frame.