EDIT : Actually the issue is this one : Native Videos in embed feed are not supported if user is not logged in. (And so in a webview chrome app, it is not logged in) Bug reported to Facebook here : https://developers.facebook.com/bugs/353742028342246/ and maybe it is "by design"
Old question :
I want to show a Facebook page feed in a Chrome App, it works very well except native videos are not visible.
To reproduce, take the hello world app: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/hello-world
Add permissions:["webview"] in manifest.json
Add this after <h1>Hello, World!</h1> :
<webview src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fyoutube%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></webview>
(use this page : https://developers.facebook.com/docs/plugins/page-plugin and replace 'iframe' with 'webview')
Chrome -> Load Unpacked Extension -> You will see the feed but without the native videos :
If you open index.html with your browser (and use <iframe>) it will show the video...
If I use <webview src="https://www.mydomain.fr/company">, with the correct <iframe> in it, same problem : works except native video.
PS : Youtube Videos are working, you can try with the Youtube page:
<webview src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fyoutube%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></webview>
I reported the bug to Facebook and maybe it is "by design"
https://developers.facebook.com/bugs/353742028342246/
waiting for a response by the "team" though.
First copy the URL of the facebook video you want.
Then go on this page:
https://developers.facebook.com/docs/plugins/embedded-video-player#configurator
Paste the URL where it says "URL of the video", then click Get Code which is located at the bottom.
You can copy the url that is placed in href tags (which is on step 3) and paste it into your editor.
Related
I'm trying to load facebook posts inside a local html file by html code provided via Facebook post's 3 dot menu "..." -> Embed button.
It looks something like this.
<iframe src="https://web.facebook.com/plugins/post.php?href=https%3A%2F%2Fweb.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500" width="500" height="313" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
When it's on server it works properly, but when loaded from a local html file, I'm getting "This Facebook post cannot be loaded." message.
I need to load it locally. Any ideas?
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.
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.
I have a very simple html page with following content:
<embed width="260" height="282" src="rtuner.wmv" showstatusbar="true" showgotobar="true" showdisplay="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" name="rTuner" />
Note that 'src' attribute of embed element takes a relative url. This very simple html element plays the video in older browsers like Firefox 10, IE8 etc., but it doesn't play in FF 17 and Chrome 27. If 'src' attribute is assigned a absolute URL then the video works again.
Any ideas why so?
EDIT: Observed Firebug console shows this warning - 'Error: Permission denied to access object'. Does this message give any hint?
It's an WMP plugin issue. If browsers have old wmp plugin npdsplay.dll, a new wmp plugin np-mswmp.dll has to be installed. http://kb.mozillazine.org/Windows_Media_Player
If you want to embed a video, do it like this..
First, click on the desired video in youtube and click on share
Next, you click on Embed button
Now you just copy the code that youtube has provided and paste it in your code..This will make the video appear in your web page..
Try it..
<h1>Video examples:</h1>
<iframe src="https://www.youtube.com/embed/j6gNKR0TMMo"></iframe>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/error-lolcat-problemz.jpg">
<embed src="https://www.youtube.com/embed/j6gNKR0TMMo" width="1000" height="600">
<h1>Image examples:</h1>
<h1>Link examples:</h1>
Link
I'm trying to get Iframes to work. I'm running safari, so it is compatible, but when I test it, it comes up blank.
Code:
<iframe src="http://www.google.com" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
I took the code directly from the w3schools website after using the "try it out" editor so I know it's supposed to work. When I changed the page from a page in their subdirectory to an external page, it shows up blank.
The syntax is correct. It's not your fault - Google is blocking iframing using the X-Frame-Options header that newer browsers listen to.
Possible workarounds are explained in this Google forum post.
Follow the instruction in the following Google Developer Site under "IFrame embeds using the IFrame Player API" bullet:
https://developers.google.com/youtube/player_parameters
This uses API's JavaScript code to view youtube videos.
Here's the link with a more general instruction
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player