embedly / embedly-jquery Goto Github PK

We use embedly in conjunction with the Masonry plugin (http://masonry.desandro.com/), and I would quite like to retrigger Masonry once embedly has finished doing its thing and its content has been rendered.

Is this possible?

The following URL does not return information. Is there any revision planned?

http://www.economiadigital.es/es/notices/2016/12/mercado-mundial-smartphones-2016-87900.php

Thanks in advance.

Cuando integro dos o más fotos iguales (mismo link) de Flickr, el link que se crea es incorrecto, agregando un conjunto de caracteres extra la misma cantidad de veces que fotos iguales intento integrar.

When Im embeding two or more identical photos (same link) from Flickr, the link that is created is incorrect, adding extra character set, the same amount of times that same-photos i try to embed.

ps, sorry by mi english ;) !
greetins from Chile & nice work !

In the readme, it suggests setting the Embedly key like this:

$('#content a').embedly({key: 'Your Embedly Key'});

Maybe I'm missing something obvious here, but if I set my Embedly API key in my client-side JavaScript, what's to stop somebody else from stealing it? Couldn't somebody easily do the following?

1. Write a script to crawl websites and look for jquery.embedly.min.js.
2. Download all of the JavaScripts associated with those sites.
3. Match /embedly\([^)]*key:\s*['"]([^'"]+)['"]/
4. Grab those keys and go to town.

For our use case, we don't want to allow users to edit the preview, but there is no option for this.

Because $.browser has been deprecated for a long time and removed in this release. So https://github.com/embedly/embedly-jquery/blob/master/jquery.embedly.js#L155 (contains $.browser.msie and $.browser.version) crashes the app with Uncaught TypeError: Cannot read property 'msie' of undefined.

I think the plugin needs some update to change its approach towards browser detection or have a way to work for jQuery 1.8+.

In the meantime, for those who needs a quickfix for browsers others than IE < 9, here's what I wrote at the top of my own js code :

$.browser = {
  mozilla : /firefox/.test(navigator.userAgent.toLowerCase())
  webkit : /webkit/.test(navigator.userAgent.toLowerCase())
  opera : /opera/.test(navigator.userAgent.toLowerCase())
  msie : /msie/.test(navigator.userAgent.toLowerCase())
};

When using this plugin alongside jQuery 3.2.1 and jQuery Migrate 3.0.1, we get a deprecation warning coming from this plugin: jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos

Here is my html

<a class="embedly-card" data-card-theme="dark" href="https://github.com/embedly/embedly-jquery"></a>
<a class="embedly-card" data-card-theme="dark" href="http://rubyonrails.org/"></a>
<a class="embedly-card" data-card-theme="dark" href="https://www.facebook.com/"></a>

Here is my jquery

<script type="text/javascript">
$( document ).ready(function() {
$.embedly.defaults.key = 'my key';
$.embedly.defaults.query = {width: 150};
$('a').embedly();
});
</script>

it doesn't work, the images still perform original size.

Another issue was some thumbnails being different shapes and sizes.

Altering the img tag into a div using background-image gave me a bit more flexibility whilst not drastically stretching the image.

html = this.thumbnail_url ? "<div class='thumb' style='background-image:url(" + this.thumbnail_url + ");" + this.style + "'/>" : "";

And some CSS to go with:

.embed .thumb {
    width: 160px;
    height: 160px;
    background-size: cover;
    background-position: 50% 50%;
    float: left;
}

Hi folks,

I wish to render non-image/video/rich embeds manually. I'd naturally pass a custom display function to the embedly() constructor. However, since I have multiple instantiations in my application, I'd like to override the function once and for all.

I tried overriding $.embedly.display once jQuery.embedly.js is loaded but strangely, the original function is still called instead. Any idea why this happens? Logging $.embedly.display shows that the function is actually overridden.

If I make a request like so:

$.embedly.extract(url).done( successHandler ).fail(failHandler)

Then failHandler will never get called. If the embed.ly service returns any 500 error (I've seen several 503 server at capacity errors lately) or 400 error, the deferred object will never be resolved and neither of the handlers will be called.

This can be simulated by changing line 134, which builds the url, to call a bad url: '://api.embed.ly/badurl/' - this will return a 404.

I believe part of the fix would be to update the ajax call on line 197 to handle things other than success, but looking into the Keeper object it doesn't seem to be setup to handle this. I've setup my own client-side code to handle if the embed.ly service is temporarily unavailable or the ajax call just decides to not work, as happens, and update the client appropriately, but this doesn't work because fail handler is never called.

If you try to call $.embedly with a URL that is not supported by embedly, the function doesn't call the success handler, e.g.

 $.embedly(['http://google.com'],
      {maxWidth: 600,
        success: function(oembed, dict){
                   alert(oembed.title);
        }});

It should either call the success handler with an oembed of null (as per the README, "Will Return a JSON object representing an oembed or null") or define an alternate failure handler for cases where the provider is not supported.

http://api.embed.ly/documentation#oembed

any way to get this to return only images bigger than a certain min-width and min-height?

There are two issues:

1. the default URL regex only matches http://, not https://, which is the default scheme for Gist URLs.
2. neither the oembed nor the dict objects returned on success include the html attribute. Indeed, it seems nothing from the actual OEmbed JSON is returned.

This Gist has this OEmbed JSON:

{
  "author_url": "https://github.com/jamesarosen",
  "version": "1.0",
  "type": "rich",
  "url": "https://gist.github.com/733951",
  "html": "<div class=\"data syntax\">...",
  "provider_name": "GitHub",
  "provider_url": "https://github.com",
  "title": "gist: 733951",
  "author_name": "jamesarosen"
}

None of that is available from jQuery-embedly.

☝️

When a URL is not valid or the API throws an error during multi-get the jQuery lib fails sliently. We should at least add a callback in case a developer needs to listen for them.

I'm using embed.ly on a Plone site and it's working, except that the width, height, minwidth and midheight parameters don't seem to have any effect.

I first load jQuery, then Embedly-jQuery, and then a very small script that does something like this:

$(document).ready (function () {
    $('.entry-body a').embedly({
        key: 'myKey',
        query: {
            width: 463
        }
    });
});

I'm trying this for embedded Youtube and Vimeo videos, and they are being embedded as expected except that their size keeps being the default video size in the target site, not the size I specify in my call.

Hy!
I would like to make embeds with specific times, but the embed.ly not recognize the links, just display the youtube video.
So I need this in replace:
https://www.youtube.com/embed/YkxUzLy7GEo?start=29
Instad of this:
https://www.youtube.com/embed/YkxUzLy7GEo

I don't know is this issue or not, but your JS function can work with empty value of API key. We very like your functionality and just whant you know this.

$.embedly.defaults.key = '';

Hi, little help please. By default when running the embedly extract for a youtube video url the api doesn't return the thumbnail url with the maximum resolution. Is there any option that allows me to change that? I assumed there was but then I looked and looked and found nothing.

This doesn't seem to be the intended behavior based on the examples you guys provide. For instance, in examples/embed.html, if an invalid URL is typed in the input clicking on embed does nothing rather than display "Not A Valid URL" (which is what the code suggests should happen).

I suggest adding ..jpg|..png|..jpeg|..gif| to the default urlRe so that image url's will also work by default. Or maybe add an extra option to enable it.

As the title says the script should probably use jQuerys $.map() function instead of native javascript map() - I have tried to implement this, but I cannot figure out how to re-implement the zip() function on line 57 of the unminified version.

I found it useful to add a character limit to the description as it could sometimes be very long (upwards of 500 chars).

A simple edit I made was:

if(this.description) {
    if (this.description.length > 175) {
        this.description = this.description.substring(0, 175) + " ...";
    }
    html += '<div class="description">' + this.description + '</div>';
}

hello everyone,

I just wanna know if it's possible to apply an autoplay for vimeo modal. Can you help me?

Tks,
Edy

Cuando intento integrar mas de un video de VIMEO tengo un problema. Puedo reproducir el video pero no aparece la 'imagen' (solo el audio). (Generalmente pasa cuando ya reproduci uno y luego quiero ver el segundo)
Si cambio el modo de la calidad (HD on y mantengo este modo o vuelvo a HD off), las imagenes aparecen.
Puede ser que el codigo de embebido no sea el adecuado?

When i try to integrate more than one VIMEO's video i had a problem. i can play the video but the 'image' don't appears (only the audio). (Ussually hapen when i play the first and i want to play the another)
If i change the quality mode (HD on and keep this mode, or i back to HD off), the 'image' appears.
Could by that the embebed code don't be the rigth?

ps Sorry by mi english.
greetings from Chile !

I use embedly like this $['embedly'].oembed(url). How to call fallback when I get 401 Unauthorized or 403 Forbidden?
Methods .fail and .catch don't work.

Just pointing out that the very first line

   window.embedlyURLre = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/

Contains a bug if someone minifies it with other libraries. The regex has problems parsing and throws errors when other minified content is present. Ending the statement with a semicolon fixes this issue.

I think your other goal is to have Embedly available on Google's CDN. We will give a star here http://code.google.com/p/google-ajax-apis/ to help embedly :-)

I think commit 7b72d63 introduced a bug where only one video embed works for pages with multiple videos. I'm not sure if something is wrong on my end (I'm on a shitty connection), but even the video example page doesn't seem to work with the latest version.

code = "<a href='" + dict.url + "' target='_blank'><img style='" + createImageStyle() + "' src='" + oembed.url + "' alt='" + title + "' /></a>"

vs.

description = oembed.description ? '<div class="description">'+oembed.description+'</div>' : '';

Seems like the pattern of…

var string = "The quick brown " + animalName() + " jumps over the lazy <span class='" + animalType() + "'/>dog</span>"

Is most appropriate.

It appears that embedly defaults are changed permanently by the options on every embedly request.

For example, calling objectify one time:

$.embedly(postText, {
    endpoint: 'objectify',
    success: function(data, dict) {
        console.log("this function will be called on ALL subsequent embedly requests");
});

Later on if I make a oembed style call:

node.embedly({
    method: 'after'
});

It fails because $.embedly.defaults was modified in the previous call, and the defaults got assigned a NEW default endpoint ('objectify'), as well as a NEW success function that is call for ALL subsequent embedly calls.

It turns out that the reason for this is because of this jQuery call in embedly:

if (typeof options !== "undefined"){
    settings = $.extend($.embedly.defaults, options);
}

Changing this to settings = $.extend({}, $.embedly.defaults, options); will prevent embedly defaults from being overwritten.

Currently the only workaround seems to be to explicitly provide all the necessary options on every call, like:

node.embedly({
    endpoint : 'oembed',
    success: null,
    error: null,
    method: 'after'
});

illustrated here: https://gist.github.com/e9362ced05775165a87c/2fcedd5d0e61ebd3c6ba4cd66f409f82fd57418b

I set the display option with the code from http://embed.ly/docs/tutorials/responsive. But it has for consequence that Embedly is not applied on object whose type is not rich or video. How can I invoke the built in display function in a custom display function?

$('a').embedly({
  display: function(obj){
    // Overwrite the default display.
    if (obj.type === 'video' || obj.type === 'rich'){
      // ...
    } else {
      // here how can I invoke the built in display function on `obj`
    }
  }
});

If you call $("a").embedly(); on a document and the link is contained within a <p /> tag as below:

<p><a href="http://www.youtube.com/watch?v=UhyQT5Jua00"&gt;http://www.youtube.com/watch?v=UhyQT5Jua00 </a></p>

The script fails in IE8 with a red X being displayed instead of the youtube video.

As a work-around, use the following:

$("a").embedly({wrapElement:'span'});

Replacing the default spanning <div /> with a <span /> tag takes care of this problem. Note that this problem only appears in IE8 that I can see. It renders fine without the span call above in FF and Chrome.

I did an upgrade of new javascript, but I have not success to see it working. can you provide some help to check if we need some more info to run it well?

in firebug I checked if all javascript run , and they do
it seems a problem to recognize url

I see the urlRe is a var defined inside the plugin scope and not configurable from the outside...
The docs specify you can send urlRe as part of the options hash...
Has this changed?

I'm using Embedly for jQuery in my project and I noticed in my console some errors like :

Unsafe JavaScript attempt to access frame with URL [local] from frame with URL [distant]. Domains, protocols and ports must match.

I was wondering if that was an error you're aware of and were willing to correct or not.
I found that thread on stackoverflow that could lead to something (iframe/embed).

embed.html and photos.html don't work. I haven't tried the others. I looks like they are doing:

$.embedly(url, {options...}, function(oembed, dict){})

instead of

$.embedly(url, {options..., success: function(oembed, dict){}}

It would be nice if the plugin settings could be exposed so they can be set as a global default without having to edit the plugin directly or declare them each time you apply embedly. Something like: $.embedly.defaults = {key: null, maxWidth: null}

on Firefox 3.6.15 in my cms, when I enable it adding embedly in very simple way:

browser gives this Error:
A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Script: http://localhost/test//jquery.embedly.js:193

when I refresh the page on FF it works.
on gChrome it works fine

Took me forever to figure out why this wasn't working. Finally realized is was simply the capitalization by looking at the source code.

I was testing this page for other reasons: http://andrewray.me/stuff/test-body.html and it puts the string "null" directly in the page for the description. Same as here http://embedly.github.io/jquery-preview/demo/

Hi there,

I believe the regex used to filter URLs requires that the URL passed includes either http:// or https://

Since embedly supports URLs without the protocol (i.e. http://embed.ly/docs/explore/oembed?url=wikipedia.org), I think this client should also

I changed the regex to
var urlRe = /[-a-zA-Z0-9@:%.+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%+.~#?&//=]*)/;

This now accepts URLs without the protocol, but I am afraid it also lets some bad formatted URLs pass.
What do you think?