Coder Social home page Coder Social logo

jquery-oembed-all's Introduction

This project is DEAD. My apologies for not annoucing this sooner - thank-you to all contributors. I believe the best fork out there is the one at https://github.com/nfl/jquery-oembed-all

Jquery-Oembed-All

This is a fork (with a lot of changes) of the jquery-oembed located at http://code.google.com/p/jquery-oembed/.

Instead of using oohembed or other such services it tries to embed the object natively without having to use some kind of local server. This project will happily use native oembed services when it can, however it also use other types of embedding whenever oembed is not possible.

Using the Open Graph protocol (http://ogp.me/) over Yahoo's YQL (http://developer.yahoo.com/yql/), as a fallback, will display some kind of information for a lot of pages. Sites like TED, Ifixit, Ars Technica, twitpic can use this service. However some sites like bandcamp stop YQL from working because of their robots.txt file. Over time I'll be removing the some providers that have been hardcoded and using OGP instead to provide a standard embed layout and reduce the file size.

This project tries to use embedding techniques in the following order of preference:

  • oEmbed - JSONP available - e.g. flickr, meetup etc
  • embedding (IFRAME/Object) based on URL information - e.g. youtube
  • oEmbed - JSONP not Available - use YQL to correct - e.g. Ustream, viddler
  • OGP over YQL - used as a fall back.
  • YQL Screenscape to get embedding details
  • YQL Screenscrape - e.g. pastie
  • JSONP Api lookups Source - With HTML and CSS built in this project - e.g. github, Myspace, Facebook

Quick Start

Add this to your javascript file.

$(function(){
   $("a.embed").oembed();
});

Add class="embed" to anchor tag which contains the URL you wish to embed.
Ex: <a href="http://www.youtube.com/watch?v=8mwKq7_JlS8" class="embed"></a>

Shortened Urls

This project now handles shortened url's using the JSONP service from http://longurl.org. e.g. http://bit.ly/oP77mm will first lengthen the URL to http://tinychat.com/omginternetparty and then embed as normal. This is experimental - so let me know of problems!

to use...

<a href="https://github.com/starfishmod/jquery-oembed-all" class="oembed">https://github.com/starfishmod/jquery-oembed-all</a>
  1. url
  2. options
$(".oembed").oembed(null,{
    embedMethod: 'auto',	// "auto", "append", "fill"	
    apikeys: {
      amazon : '<your amazon key>',
    }
});

Current 3rd party sources include:

####Video

####Audio

Photo

####Rich

####TODO:

Plus a lot more :) Feel free to submit

jquery-oembed-all's People

Contributors

abhishek77in avatar bryanjos avatar dariusj18 avatar dieterc avatar druiz avatar ganchiku avatar joerussbowman avatar kasperisager avatar mrclay avatar mrpck avatar real34 avatar rformato avatar starfishmod avatar tresni avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

hanksims kaore rformato mrclay victorenator joemaffia i8ramin japrescott mkai wmalevski philip-crunch joerussbowman goldenboy justinkelly chalkchisel davisdole krtek-net mpriyaah dariusj18 metacowboy dbdev alexisweil iamapinan ckavuklu mrpck jminuscula dieterc mrjj amitnarayanan detj samcrosoft porwalmayank jobsonribeiro nathanielford nicolaasmatthijs dieseltravis anvie resseguie dirkritters georgemarshall hkapsime rhiokim danielfariati disshishkov eeertekin denismars mjau-mjau hectorlee369 laaabaseball storagebot guillearg patcito free1989 baver11 lupel31 edicy kkrieger85 me6iaton jtsay362 dipesh008 bbrossaud boqapt shaikh-shahid marquisknox tmbtech evnix nfl fearlsgroove malaybiswas leafiy imclab krishna-1 cyberby ryush00 jpkcom enderdemirkaya corleoner libraryofmillie bobquest33 lcabral37 tdgroot fullstackenviormentss petertwise simplyniceweb ipeople tudorakis hamurcuabi truyentdm

jquery-oembed-all's Issues

Make embed providers into plugins

I think this is a really great plugin, but it would be great if the different providers were removed from the main script file and one could decide which providers to support. Either by some sort of build script or individual files for each provider. I may fork the project and do that.

Documentation for options param

Where's the best place to use as a doc reference?

PS great work on this library. Maybe worth setting up a wiki for it so we can contribute any other tips etc for it? I have to admit I don't know how that works on Github, but I just know I can't see the wiki tab :)

mixcloud.com custom height and width not working

hello , i am trying with mixcloud.com urls with custom height and width but its not working . the height and width of the embed is always 300 px both. please can you look into this issue :)

LinkedIn Friendly Profile Names

I had to make a change to support friendly linkedin profile names, so I added another provider. Also, I added "lnkd.in" to the tiny url array. I'm sure you can find a better way to do this, but here is what worked for me:

new $.fn.oembed.OEmbedProvider("linkedin", "rich", ["linkedin.com/pub/.+"], "https://www.linkedin.com/cws/member/public_profile?public_profile_url=$1&format=inline&isFramed=true",
  { templateRegex: /(.*)/, embedtag: { tag: 'iframe', width: '368px', height: 'auto' }
  }),
new $.fn.oembed.OEmbedProvider("linkedin2", "rich", ["linkedin.com/in/.+"], "https://www.linkedin.com/cws/member/public_profile?public_profile_url=$1&format=inline&isFramed=true",
  { templateRegex: /(.*)/, embedtag: { tag: 'iframe', width: '368px', height: 'auto' }
  }),

custom height and width for yql embed sites

hello , first of all thank you for forking this plugin and there are few websites such as youtube, minoto-video,ustream ,etc all using YQL embed in this plugin and they have thier own height and width . can u please make a option to specify a custom height and width for them , as it looks very odd with videos of same providers with different height width in a page.

.oembed("non-hyperlink") and use ajax() will make it fail

When I click a (id=aa) use .ajax() , the oembed will be fail.
eg. test.html

test.html :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="content-type" content="text/html; charset=utf-8"/>
< title>< /title>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">< /script>
< script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js">< /script>
< script type="text/javascript" src="jquery.oembed.js">< /script>
< script type="text/javascript">
$(document).ready(function(){
$("#aa").click(function()
{
$.ajax({
type: "POST",
url: "test.php",
cache: false,
success: function(html)
{
$("#content").html(html);
}
});
});
});
< /script>

< /head>
< body>

< div id="container">
< div id="mainContent">
< div id="sidebar">
< p>a< /a>< /p>
< p>b< /a>< /p>
< /div>
< div id="content">

< script type="text/javascript">
$(document).ready(function()
{
$("#stexpand1").oembed('http://vimeo.com/3108686');

});
< /script>

< div id="box">
< div id="stexpand1">< /div>
http://vimeo.com/3108686< /div>

< script type="text/javascript">
$(document).ready(function()
{
$("#stexpand2").oembed('http://www.youtube.com/watch?v=LL0Njfd4oCk');

});
< /script>

< div id="box">
< div id="stexpand2">< /div>
http://www.youtube.com/watch?v=nA3LtXnNIto< /div>

< script type="text/javascript">
$(document).ready(function()
{
$("#stexpand3").oembed('123');

});
< /script>

< div id="box">
< div id="stexpand3">< /div>
123< /div>

< /div>
< /div>
< /div>
< /body>
< /html>

Request: Dribbble

Not sure if this is the best place to submit requests, but dribbble player cards and individual shots would be good. First thing I thought of trying this script with and no dice.

Feature Request: Just return JSON

Something that would make jquery.oembed easier to fit into existing projects would be to just return json., which developers could then pass to something like underscore templates. This would make it a better fit for working with libraries like backbone and give developers a better format option for display

Make videos semi-responsive not only in append

Is there a reason to have the semi-responsive feature only for append mode?

I slightly modified the code to support also fill/replace and it seems to work properly... should I pull request? (it's really 2 lines of change)

Enable or disable selected providers

The original jquery-oembed project accepted an allowedProviders and disallowedProviders array that specified a whitelist or blacklist of providers. This version does not seem to accept that.

Thanks to the incredibly large number of supported sites (congratulations on that), I'm having some trouble controlling what my page looks like after jquery-oembed is done. I'm mainly interested in embedding video. Having an explicit whitelist will make this project more usable.

Performance tip: $.fn is prototype!

Hello,

First thanks for the amazing great job!

Now the issue:
It's better to store helpers in $.oembed than in $.fn.oembed : $.fn it's used as prototype, so every jQuery instance will have a copy of all helpers method... it's not necessary and bad for performance (use memory).

All helpers + defaults and providers should be stored in $.oembed -> no unwanted copy in every instance!

Also the providers could be in a standalone file, make more sense to me.

Youtube embeds video thumbnails?

Not sure if I'm doing something wrong, but URLs from youtube are returning the Video thumbnail?? Can also be seen on your demo page.

Chrome and https

Hi,

using Chrome on a https site, the browser refuses to open connections to http, which means most of the contents can't be embedded. Example instagram, whose api is http://api.instagram...

The best solution IMHO is to replace http://api.instagram... with //api.instagram...
However I'm not sure that all services actually have an https endpoint... and I don't know any good way to test it.

Best,

Using also with non urls

I've been testing this great plugin with a tag wall where the updates are a mix of regular text messages, images and links.

On non-urls I as expected get data.query.results.meta is undefined error.

I fixed this by adding this after succes in line 125
[code]
if (data.error) {
return false;
}
[/code]

I also noticed sometimes the iframe (especially in youtube urls) cuts the video short.. Any way fix iframe size to 100% ?

Youtube videos not resizing.

Youtube videos do not have the proper width. For example:

{
maxHeight: 380,
maxWidth:380
}

adds an iframe to the dom but the width is set at "450"... Vimeo and other videos seem to be working correctly though.

maxheight and maxwidth not working for YouTube?

Hi, I am trying to embed youtube clips, but they are not respecting maxwidth/maxheight. Am I doing something wrong or is this not supported? Here is the code:

$(".oembed").oembed(null, {
embedMethod: "auto",
maxWidth: 300,
maxHeight: 200 });

It does embed my links, but at full size, not what I have specified...any ideas? Thanks!

StockTwits (chart.ly changes)

Chart.ly has kind of moved to stocktwits links now. I added the following to be able to get a chart from a stocktwits url:

new $.fn.oembed.OEmbedProvider("chart.ly", "photo", ["chart\\.ly/[a-z0-9]{6,8}"], "http://chart.ly/uploads/large_$1.png?",
  { templateRegex: /.*ly\/([^\/]+).*/, embedtag: { tag: 'img'} }),
new $.fn.oembed.OEmbedProvider("stocktwits.com", "photo", ["stocktwits\\.com/message/.+"], "http://charts.stocktwits.com/production/original_$1.png?",
  { templateRegex: /.*message\/([^\/]+).*/, embedtag: { tag: 'img'} }),

You can use this url as an example: http://stks.co/jFTr

I also added the tiny version "stks.co" to the array at the top.

This new provider pulls in the image just fine (however it is usually blurry because it has been resized down)), but I would love it if the image linked to the original stocktwits message, or would open a lightbox to the larger sized image, or if it was possible to embed the stocktwits message similar to a twitter status update, or ideally both (displays the image, and the full stocktwits message).

Namespace CSS selectors

All CSS selectors should be namespaced under a parent selector (eg ".oembed-container .facebookBody" instead of ".facebookBody") or have a prefix (eg ".oembed-facebookBody") to prevent conflicts with existing selectors.

Url error

Hi, sorry if its been discussed , i was searching around but couldnt find any solution.

When i pass an url i get the following error.

Uncaught TypeError: Cannot read property 'meta' of null

For example Facebook, tryied toher url's the same, and show the same error.

Could please someone give me a hint?

Thank you

Fix for normal text.

Hi, i have replaced this line

resourceURL = (url != null) ? url : container.attr("href"),

with this:

resourceURL = (!url.indexOf('http://')) ? url : container.attr("href"),

at line 20, because this script also add href attr to normal text. With my fix work fine :)

IE9 permission denied embedding bandcam

When using bandcam IE gives permission denied error. FF, Opera, Crome works fine..

I solved by changing line 442

return results.meta ? '<iframe width="400" height="100" src="' + results.meta.content + '" allowtransparency="true" frameborder="0"></iframe>' : false;

to
return results.meta ? '' : false;

P.S great script :-)

Latest revision doesn't work

Looks like something has gone astray in recent revisions, and the code simply won't work. Reverted to an earlier revision and all worked fine.

Problems with img.ly and yfrog.com

I had issues with img.ly and yfrom.com.

I've just tested a few links like:
http://img.ly/pEqf
http://yfrog.com/oc1qvkwj
(I'm not a user of any of those services, so please excuse me if I got wrong links).

BTW, today I've successfully tested a few others:
youtube, metacafe, hulu, vimeo, dailymotion, mixcloud, rdio.com, Soundcloud, spotify, flickr, photobucket, instagram, imgur.com, meetup, ebay, slideshare (plus r.ebay.com, Spotify, XKCD in my pull request :)
So thanks a lot for sharing this project!

Getting a 403 forbidden back

hi,

i keep getting following errors on my image links:

api.embed.ly/1/oembed?format=.............(url of img)
Failed to load resource: the server responded with a status of 403 (Forbidden)

the funny thing, it works sometimes, and fails most of the time.

here is my javascript code:

function newEmbedly(){

    $('.oembed').oembed(null,{
        embedMethod: 'auto',
        maxHeight: 300,
        maxWidth:450

    });

}

maxHeight: 200, maxWidth:300 returning error

hello , thank you for making so much changes again and working on this plugin. but when i used maxHeight: 200, maxWidth:300 settings then it is returning a Uncaught ReferenceError: setting is not defined error. can you please check the error.

vimeo, container size

the vimeo does not specify width and heigth

new $.fn.oembed.OEmbedProvider("vimeo", "video", ["http://www.vimeo.com/groups/./videos/.", "http://www.vimeo.com/.", "http://vimeo.com/groups/./videos/.", "http://vimeo.com/."], "http://vimeo.com/api/oembed.json"),

cause the vimeo container take out big portion of the screen.

can specify width and height for all OEmbedProvider?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.