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?
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.)
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
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]
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.
Related
Does anyone know if it's possible to embed a Google Map using iframe into a Github pages page built using the automatic page generator?
For example, I would like to embed something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d100921.8397227734!2d-122.50711698562192!3d37.77111185957552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sGithub!5e0!3m2!1sen!2sus!4v1464784986282" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
When I try to embed the above, however, the iframe element appears to be stripped from the final HTML so that no map is shown.
I looked around a bit and couldn't find much information on embedding maps, or in general, using iframe elements in Github pages.
People appear to have luck embedding Youtube videos within an iframe, but the same tweak does not help with the maps.
Any suggestions?
You will not be allowed to insert iframe from the page generator.
You have to edit your page from, for example, https://github.com/username/repositoryname/blob/gh-pages/index.html, by clicking on edit button (see picture) and insert your iframe code.
Not really sure if I can ask this so I hope its ok. I have my site where I would like to embed and play video which is stored on OneDrive cloud service. So far it sounds easy, however here's the thing: while I am actually allowed to embed it via provided embed iframe code, it can't be played unless its redirected on OneDrive site. I did my research all over the internet but it looks like dead end and no one really solved this mistery. This is what I got:
Official embed link:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
This embed is not playable from my site. after I press Play button it will redirect me to:
https://onedrive.live.com/redir.aspx?cid=5fac7d8a540d1b7a&resid=5FAC7D8A540D1B7A!141&parId=5FAC7D8A540D1B7A!140&authkey=!AM3Y3EuRuTPbKo0
then here:
https://onedrive.live.com/?cid=5fac7d8a540d1b7a&id=5FAC7D8A540D1B7A%21141&sff=1&authkey=!AM3Y3EuRuTPbKo0
and finaly here where I can play it:
https://onedrive.live.com/?authkey=%21AM3Y3EuRuTPbKo0&cid=5FAC7D8A540D1B7A&id=5FAC7D8A540D1B7A%21141&parId=5FAC7D8A540D1B7A%21140&o=OneUp
Official share link:
https://onedrive.live.com/redir?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
From this I found a way how to create direct download link by changing redir part with download:
https://onedrive.live.com/download?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
It can be put into <iframe> or <video> but it still can't be played. Also is possible to change redir to embed:
<iframe src="https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
which is pretty much same as official embed link. Then there are also strings like: &em=2 and &Embed=1 (not really sure what they stand for, but they do change redirected output) Example:
https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&ithint=video%2cmp4&em=2&Embed=1
From what I understand these listed strings can be always skipped:
?cid=5FAC7D8A540D1B7A
&authkey=AM3Y3EuRuTPbKo0
&ithint=video%2cmp4
&id=5FAC7D8A540D1B7A%21141
&parId=5FAC7D8A540D1B7A%21140
&o=OneUp
With this, I am at point where embed is not embed at all. Its like new word to "redirect me to OneDrive and play me there". Ofcourse I also tried to get help at OneDrive support, but they play stupid! and keep asking me why would I need to play my video on my site when I can play it on my drive just fine. Apparently they mocking me. I am not really tryin' to use them as my ftp server (and even if I would its not their bussines till I violate their code of conduct), I just want to play my embed video on my site like I would with Youtube, Vimeo or Dailymotion. (Well, to be honest it wouldnt bother me so much if I wouldnt already purchased 2TB storage)
I in the end I looking for "true embeding" or at least "direct link" like I found when it comes to images: http://1drv.ms/1PbOhF8 where direct link is: https://u6gkqq.dm2303.livefilestore.com/y3mtdqmTctG9LFmZ_HLl1tYgUkWTiB8xkCZ0-nOKP2_SLzkuVXtzJzhavaA8axBWlqrVezVbDjA4bO-8AJjbVSp_Yc3luKWSiMVuhvRhnvYFie_FfOEQldmztKVtOlxGrG18AIftsAbOwfXORrB8TZ1EPZYFmKQ6KfmA8Q2TWqStxE/%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA-%D0%B0%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B0-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-Tilt-Shift-2344711.jpeg?psid=1
I mean, there must be a way how to actually get direct link of stored file even if its video, right?
I even tried to insert video into my desktop MS PowerPoint 2013 and then upload it on OneDrive, get embed code, place it on my site and play it on my site. Problem is that such embed presentation can be viewed only by me and also only outside of fullscreen mode (entering into fullscreen will lead to redirect on OneDrive again). Here I attach share link + embeds:
http://1drv.ms/1Z33Xox
Embed from online OneDrive storage:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>
Embed made from embeded embed:
<iframe src='https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2&wdAr=1.7777777777777777&Embed=1' width='402px' height='327px' frameborder='0'></iframe>
Now, interesting is that for playing this presentation is used native HTML5 player. While on "share link" right-click menu is disabled (with oncontextmenu="javascript:return false;"), but while in embed mode, right-click menu is enabled however there is missing fullscreen on controls (allowfullscreen). Unfortunately video cant be saved or opened in new tab, because it will trigger downloading of some "mediahandler.ashx" file which is infact my video file with renamed extension! This is the address:
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx%5FLeyX%5Fg&z=257&usid=9992f846%2D2470%2D4a99%2Da07d%2Da26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
which will redirect here and trigger download of ashx file -
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx_LeyX_g&z=257&usid=9992f846-2470-4a99-a07d-a26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
any ideas, please ?
use video tag and in src attribute use the src value of iframe and change embed to download.Hope it will work.try it.
<video controls width="360" height="240">
<source src="https://onedrive.live.com/download?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" type='video/mp4'/>
</video>
I clicked on your Official Share Link and in the top menu there is an item for "View Original" which, after clicking, takes me to the direct download link:
https://u6eqtg.dm.files.1drv.com/y4mFkEomS8JzzREaa-IhXyseplbhCfA84Z6hcTSQXf84jFDR5_9J1PSSulKVzZqfLBs_wGqombsF45k4k3P_pZky7a1t0XOPEduQFQlhog8VshPfMzcue76CBDxU_Uz37zFAadc5gkokilYAHz5iq_FCSbgV6ago5AP8Vj5bkEb_37O5LwIooZAEQtOwa89zcAH12SNGGnW5kDX_2buZxcZbxAzOzfgPOVZHCMbkjZsr5Y/Pilobulos_Symbiosis_2005-480p.mp4?psid=1
By the way, if you have a folder full of files that require a direct download URL, I found that this answer is useful for grabbing all the direct links in a shareable folder.
Came across this which worked https://blog.omaration.com/embedding-videos-from-onedrive-into-your-blog/
Basically: take the embed src= value and use that in your HTML5 video src=, but change ?embed to ?download.
I want to embed a YouTube video link in my web page with something like url://youtu.be. It's not appearing when I embed that in my web page. The below code, however, is working well (url://youtube without the dot).
<iframe width="420" height="315" src="https://www.youtube.com/embed/4pXUcxWLA7g" frameborder="0" allowfullscreen></iframe>
Why does using a "youtu.be" link not embed properly?
Because youtu.be is a URL shortening service. So when you go to a you.be URL, all it does is Redirect you to the full URL for a video.
Edit, actually that's not the complete end of the story. What happens when you do that is yes, it redirects you, but then the browser gives an error:
"Refused to display (video url) in a frame because it set
'X-Frame-Options' to 'SAMEORIGIN'."
So, this could work with redirection, but it doesn't because youtube sends down this response
header: x-frame-options:SAMEORIGIN
And so the browser refuses to display it because it's not the same origin (that is, it's not being served from the same domain). Why does youtube do this? That I don't know. But, basically, it appears you MUST you the youtube.com/embed style URL for iframe. If you have URLs in the youtu.be format (maybe in your database or something), then you will need to hit the youtu.be link and then see where it wants to redirect you to, and then use THAT link for your iframe.
So I've got a Google Drive folder with a bunch of images that I'd like to embed on my (non-Google) website.
I've got them shared as visible to public, and I can get a list of the images here:
https://googledrive.com/host/0B3jFSjcavNweSWdFMUFfUGJNUEE/
I can embed this view on my site no problem using an iframe.
What'd I'd really like is an embeddable view that shows a thumbnail for each image, rather than a list of filenames and dates ... and put that on an iframe on my site.
Possible?
Thanks!
You've probably already sorted this yourself by now but I came across your question whilst looking for a way to embed the 'root' directories for a Drive. This should do what you need; you just need to use the #grid option to get the thumbs:
<iframe id="298782643" title="SQ 712 Web site photos"
src="https://drive.google.com/embeddedfolderview?
authuser=0&hl=en_GB&id=0B3jFSjcavNweSWdFMUFfUGJNUEE#grid" height="800"
width="100%" allowfullscreen="true" frameborder="0"></iframe>
Is there any way to embed a PowerPoint slide show in an HTML page using just the standard tags etc? I tried using a iframe, but that just results in the PowerPoint being downloaded.
<iframe src="Chapter1.pptx">Your browser does not support.</iframe>
I am looking for a way to show the slide show using only standard stuff. I realize I could use google docs or flash or something, but I'd rather have a simple implementation.
Does the web just not know how to process a PowerPoint presentation?
Plain and simple...this is the best method to embed any Microsoft or Adobe file into a HTML website.
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>
Just to update this question - as there is a new way to embed Powerpoints in a web page. If you have an account on OneDrive, do the following using Powerpoint Online (accessing Powerpoint via the browser) to embed a Powerpoint:
Click 'File', then 'Share', then 'Embed'
Click the 'Generate' button to generate HTML code to be embedded
Copy the 'Embed Code' and paste it in the HTML of a website
Web browsers don't understand power point, but there are solutions besides Flash.
You could export it to HTML or a PDF. Or you could also upload to site like slideshare and make use of their players which are built for this problem.
I have decided to take a hack route and upload the powerpoint onto YouTube and then just include the youtube video in the iframe.
<iframe height="375" width="600" src="http://www.youtube.com/embed/assignedId"></iframe>
I know, it's cheap, but it's also easy.
EDIT
I eventually checked my page as XHTML Strict, which does not support the <iframe> tag. So I used the object tag instead.
<object data="http://www.youtube.com/embed/assignedId">
I tried answer posted by Shane, which looks exactly right and how MS used to have PPT viewing online earlier but it didn't worked for me. After doing some research I found out that the link has changed a bit.
So use:
https://view.officeapps.live.com/op/view.aspx instead of https://view.officeapps.live.com/op/embed.aspx
Example:
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>
Note: Link to PPT need to be publicly accessible.
Use Microsoft skydrive, upload your power point to this site and use this code
where
http://skydrive.live.com/redir.aspx?cid=20f065afc1acdb2e&page=view&resid=20F065AFC1ACDB2E!723&parid=20F065AFC1ACDB2E!719 is the URL of the powerpoint file.
You have to replace SD20F065AFC1ACDB2E!723 for your own string of the corresponding URL
Upload a PowerPoint document on your Google Drive and then 'Share' it with everyone (make it public):
Sharing your pptx doc
Then, go to File > Publish to the web > hit the publish button.
Go to Embed and copy the embed code and paste it to your web page
Copy embed code
Works Best for me.
Goto MS View Office Documents Online Page
Enter link to PPT file
Note: This link should be publicly Accessible
Click on Create URL.
Link to view office documents online will be generated.
Paste this link to any webpage or as iframe src attribute.
You are all set!! :)
If you are using Google slides you could easily publish it on the web and also embed the slide in an iframe.
Go to google slides -> file-> sharing -> embed and copy the code
and then in your HTML file use the below code to show slides in fullscreen mode.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/journey.css">
</head>
<body>
<!-- show slides in html web page -->
<iframe src="https://docs.google.com/presentation/d/e/2PAxxxxxCX-xxxxxxxx-_GuZImZqRUxxxxxxxxxx/embed?start=true&loop=false&delayms=3000" frameborder="0" width="1440" height="839" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</body>
</html>
why not use prezi, I just use it in my work, very easy and useful.
I was able to do this by saving the PPT as an mp4 (Save As > MPEG-4 Video (*.mp4)) and then using the video tag.
<video controls autoplay preload="none" style="width:1000px;">
<source src="/_dev/power_point/m11983.mp4" type="video/mp4" />
<p>Your browser does not support HTML5 Video.</p>
</video>