Need help with ng-embed?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

123 Stars 39 Forks MIT License 275 Commits 22 Opened issues


An AngularJS filter/directive for embedding emojis, media, maps, tweets, code and services

Services available


Need anything else?

Contributors list

GitHub version NPM version Bower version Dependency Status devDependency Status

Chat Issues License: MIT


An AngularJS filter/directive for converting text into emoticons, embedding videos (youtube/vimeo/mp4,ogg), audio, pdf, highlighting code syntax and embedding almost every service in an ordinary text string .

The demo examples are given here

PS : The jquery version of this module is embed-js.



  • Converts emoticon text codes into emoticons :smile: , :heart:
  • Finds links in text input and turns them into html links.
  • Youtube and Vimeo video embedding with video details fetched from the api.
  • HTML5 player supported media embedding (mp3,mp4,ogg)
  • PDF viewing with preview and then the actual pdf in a frame.
  • Inline Code Syntax highlighting (uses highlight.js)
  • Twitter tweet embedding supported
  • CodePen, jsBin, jsFiddle, Ideone, plunker and Github gist embed supported
  • Soundcloud and Spotify support
  • Twitch TV, dotSub, Dailymotion, TED, LiveLeak and UStream support.



Install through bower

bower install --save ng-embed
Install through npm
npm install --save ng-embed


Getting Started

Load [ng-embed.min.css] stylesheet file


Then load [angular.min.js] and [angular-sanitize.min.js] dependencies before loading [ng-embed.min.js] ```html

Load 'ngEmbed' as a dependency
angular.module('yourAppname', ['ngEmbed'])

Filter Use

You can use the filter for basic use. Its features are limited to converting text into emojis, font smileys and HTML Links.

or with custom options



var embed = {
    fontSmiley  :true,    // toggle converting ascii smileys into font smileys
    sanitizeHtml: true,   // toggle converting html code into text
    emoji       :true,    // toggle converting emojis short names into images
    link        :true,    // toggle converting urls into anchor tags
    linkTarget  :'_self'  //_blank|_self|_parent|_top|framename|cordova

Directive Usage

The directive supports many features in additions to the features supported by the filter and is fully customizable.

Directive ```html <ng-embed embed-data="text" embed-template-url="template.html" embed-options="options"



embed-data The scope variable that contains the text string to be processed
embed-options The scope variable that contains the options object (mandatory)
embed-template-url User defined template for the processed text




// Default options $scope.options = { watchEmbedData : false, // watch embed data and render on change

  sanitizeHtml     : true,      // convert html to text

  fontSmiley       : true,      // convert ascii smileys into font smileys
  emoji            : true,      // convert emojis short names into images

  link             : true,      // convert links into anchor tags
  linkTarget       : '_self',   //_blank|_self|_parent|_top|framename

  pdf              : {
    embed: true                 // show pdf viewer.

  image            : {
    embed: false                // toggle embedding image after link, supports gif|jpg|jpeg|tiff|png|svg|webp.

  audio            : {
    embed: true                 // toggle embedding audio player, supports wav|mp3|ogg

  basicVideo       : false,     // embed video player, supports ogv|webm|mp4
  gdevAuth         :'xxxxxxxx', // Google developer auth key for YouTube data api
  video            : {
      embed           : false,    // embed YouTube/Vimeo videos
      width           : null,     // width of embedded player
      height          : null,     // height of embedded player
      ytTheme         : 'dark',   // YouTube player theme (light/dark)
      details         : false,    // display video details (like title, description etc.)
      thumbnailQuality: 'medium', // quality of the thumbnail low|medium|high
      autoPlay        : true     // autoplay embedded videos
  twitchtvEmbed    : true,
  dailymotionEmbed : true,
  tedEmbed         : true,
  dotsubEmbed      : true,
  liveleakEmbed    : true,
  ustreamEmbed    : true,

  soundCloudEmbed  : true,
  soundCloudOptions: {
      height      : 160,
      themeColor: 'f50000',
      autoPlay    : false,
      hideRelated : false,
      showComments: true,
      showUser    : true,
      showReposts : false,
      visual      : false,         // Show/hide the big preview image
      download    : false          // Show/Hide download buttons
  spotifyEmbed     : true,

  tweetEmbed       : true,        // toggle embedding tweets
  tweetOptions     : {
        // The maximum width of a rendered Tweet in whole pixels. Must be between 220 and 550 inclusive.
        maxWidth  : 550,
        // Toggle expanding links in Tweets to photo, video, or link previews.
        hideMedia : false,
        // When set to true or 1 a collapsed version of the previous Tweet in a conversation thread
        // will not be displayed when the requested Tweet is in reply to another Tweet.
        hideThread: false,
        // Specifies whether the embedded Tweet should be floated left, right, or center in
        // the page relative to the parent element.Valid values are left, right, center, and none.
        // Defaults to none, meaning no alignment styles are specified for the Tweet.
        align     : 'none',
        // Request returned HTML and a rendered Tweet in the specified.
        // Supported Languages listed here (
        lang      : 'en'

  code             : {
    highlight  : true,        // highlight code written in 100+ languages supported by highlight
                              // requires highlight.js ( as dependency.
    lineNumbers: false        // display line numbers
  codepenEmbed     : true,
  codepenHeight    : 300,
  jsfiddleEmbed    : true,
  jsfiddleHeight   : 300,
  jsbinEmbed       : true,
  jsbinHeight      : 300,
  plunkerEmbed     : true,
  githubgistEmbed  : true,
  ideoneEmbed      : true,
  ideoneHeight     : 300


Default Template

{{video.views}} {{video.likes}}

Change the styling of the default template by styling the classes or provide a custom template. The default template is provided as an example.

There are certain variables that are available for the template. Its structure is given below.

Template Variables

These variable can be used while you are creating your custom template.

var video={
      host            :String,   // youtube/vimeo
      title           :String,   // Title of the video
      thumbnail       :String,   // Url of the video thumbnail
      description     :String,   // Description of the video truncating after 250 characters replacing linebreak (especially for vimeo)
      rawDescription  :String,   // Description of the video as sent by the server
      views           :Number,   // Number of video views
      likes           :Number,   // No. of likes
      uploader        :String    // username of video uploader
      uploaderPage    :String    // url of uploader's page
      uploadDate      :Date,     // Date of video upload
      url             :String,   // video url
      embedSrc        :String,   // video embed url
      width           :Number,
      height          :Number    // dimensions of the embedded video

var image ={url:String}

var audio ={url:String}

var pdf ={url:String}

var codeServices :Array // array of embed code of links of jsbin, jsfiddle, ideone and codepen

var audioServices :Array //array of embed code of spotify and soundcloud

var videoServices :Array // Array of embed code of dailymotion, ted, liveleak, dotsub and twitch tv

var gist :Array // Array of all gist ids.


The examples are given here


Older releases are listed in


  • If you are interested in contributing to this project, you are most welcome.
  • Start by filing an issue concerning whatever you’d like to see changed.
  • In case of larger changes, get the issue allotted
  • In case of bugfixes or very minor additions, feel free to file a pull request on the master # branch.
  • Please run the default grunt-task before filing any pull requests.


ngEmbed © 2014-2017+ Ritesh Kumar.
Released under the [MIT] License.
Authored and maintained by Ritesh Kumar with help from contributors.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.