angular-embed

This library wraps the embed services from NoEmbed and Embed.ly.

How it works

NoEmbed is an open-source project which provides a lot of supported services. Because it's free and unlimited, we use this service first.
But sometimes, when the page is unknown, NoEmbed can't provide anything.
Then when we try to retrieve information on a page that NoEmbed doesn't support, we use Embed.ly. It is a lot more accommodating with random page. It use an extractor to retrieve a title, a description and an illustration if available.
Embed.ly limits the amount of requests and requires an API key so you need to register.

How to use it

• You need to import angular-embed and angular-embedly in your page

<script src="bower/angular-embedly/em-minified/angular-embedly.min.js"></script>
<script src="bower/angular-embed/dist/angular-embed.min.js"></script>

• And add them in your angular application

    angular.module('myApp', [
        // set `angular-embed` as a dependency of your module
        'angular-embed'
    // inject the service
    ]).controller('Ctrl', ['embedService', function(embedService) {
        // retrieve page information
        embedService.get('https://www.youtube.com/watch?v=Ksd-a9lIIDc')
    }]).config(function(embedlyServiceProvider) {
        // set your embed.ly key
        embedlyServiceProvider.setKey('your key');
    });

• You can also use the directive instead of using the embedService with one of the following syntaxes

<ng-embed url="https://www.youtube.com/watch?v=Ksd-a9lIIDc"></ng-embed>
<div ng-embed="https://www.youtube.com/watch?v=Ksd-a9lIIDc"></div>
<div class="ng-embed:https://www.youtube.com/watch?v=Ksd-a9lIIDc;"></div>

Special Handlers

angular-embed comes with some custom handlers

| Name | Description | |:----------------------- |:---------------------------------------------------------------------------| | ngEmbedFacebookHandler | Add a width parameter to the facebook embed code and an App id (see below) | | ngEmbedInstagramHandler | Use embed.ly for instagram | | ngEmbedTwitterHandler | Construct a custom <blockquote> element from embed.ly's metadata | | ngEmbedYoutubeHandler | Use embed.ly for youtube |

To use a special handler, register them in the run block.

angular.module('myApp')
    .run(['embedService', 'ngEmbedTwitterHandler', 'ngEmbedFacebookHandler',
        function(embedService, ngEmbedTwitterHandler, ngEmbedFacebookHandler) {
            embedService.registerHandler(ngEmbedFacebookHandler);
            embedService.setConfig('facebookAppId', 'xxxxxxxxxxxxxxx');
            embedService.registerHandler(ngEmbedTwitterHandler);
            // optional: if true, prevent to use noembed as first choice (default: false)
            embedService.setConfig('useOnlyFallback', true);
        }
    ]);

Custom Handler

You can register all the handlers you want. An handler must match this structure and must return a promise of a valid oembed code.

{
    name: 'Twitter',
    patterns: [
        'https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$',
        'https?://t\\.co/[a-zA-Z0-9]+'
    ],
    embed: function(url, max_width) {
        var deferred = $q.defer();
        ...
        return deferred.promise;
    }
}