The embed.js Developer Hub

Welcome to the embed.js developer hub. You'll find comprehensive guides and documentation to help you start working with embed.js as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    
var options = {
	marked                 : false,
	markedOptions          : {},
	link                   : true,
	linkOptions            : {
    // Same as the target attribute in html anchor tag . supports all html supported target values.
		target : 'self',    
    
    // Accept array of extensions to be excluded from converting into HTML anchor links.
		exclude: ['pdf'], 
    
    // Same as the rel attribute. Will be added to all the URL links converted into anchor tags.
		rel    : ''         
	},
	emoji                  : true,
	customEmoji            : [],
	fontIcons              : true,
	customFontIcons        : [],
	highlightCode          : false,
	videoJS                : false,
	videojsOptions         : {
		fluid  : true,
		preload: 'metadata'
	},
	locationEmbed          : true,
	mapOptions             : {
		mode: 'place'
	},
	tweetsEmbed            : false,
	tweetOptions           : {
		maxWidth  : 550,
		hideMedia : false,
		hideThread: false,
		align     : 'none',
		lang      : 'en'
	},
	singleEmbed            : false,
	openGraphEndpoint      : null,
	openGraphExclude       : [],
	videoEmbed             : true,
	videoHeight            : null,
	videoWidth             : null,
	videoDetails           : true,
	audioEmbed             : true,
	excludeEmbed           : [],
	inlineEmbed            : [],
	inlineText             : true,
	codeEmbedHeight        : 500,
	vineOptions            : {
		maxWidth  : null,
		type      : 'postcard', //'postcard' or 'simple' embedding
		responsive: true,
		width     : 350,
		height    : 460
	},
	plugins                : {
		marked     : window.marked,
		videojs    : window.videojs,
		highlightjs: window.hljs,
		prismjs    : window.Prism,
		twitter    : window.twttr
	},
	googleAuthKey          : '',
	soundCloudOptions      : {
		height      : 160,
		themeColor  : 'f50000', //Hex Code of the player theme color
		autoPlay    : false,
		hideRelated : false,
		showComments: true,
		showUser    : true,
		showReposts : false,
		visual      : false, //Show/hide the big preview image
		download    : false //Show/Hide download buttons
	},
	videoClickClass        : 'ejs-video-thumb',
	customVideoClickHandler: false,
	beforeEmbedJSApply     : function () {},
	afterEmbedJSApply      : function () {},
	onVideoShow            : function () {},
	onTweetsLoad           : function () {},
	videojsCallback        : function () {},
	onOpenGraphFetch       : function () {},
	videoClickHandler      : function () {}
};

input

Default : null
Type : Selector / String

This option accepts the node selector that should be processed. Optionally you can also pass a string which will be processed by the plugin.

var EmbedJS = require('embed-js');

var x = new EmbedJS({
	input : document.getElementById('block')
})
var EmbedJS = require('embed-js');

var x = new EmbedJS({
	input : 'Lotus :smile: eleates vix attrahendams luna est.Advenas mori!Fermiums prarere in cubiculum!Cum cacula cantare, omnes stellaes manifestum azureus, nobilis https://angularjs.org/ acipenseres.Cum orgia mori, omnes rationees'
});

BREAKING CHANGE

In earlier versions, input was named as element which only accepted a selector and there was a separate method for passing a string. Now, input accepts both string and selector.

link

Default : true
Type : Boolean

Instructs the plugin whether or not to embed URLs/ convert URLs into HTML anchor tags.

linkOptions

Default :

{
  target             : 'self', 
  exclude            : ['pdf'],
  rel                : ''
  }

target : Same as the target attribute in html anchor tag . supports all html supported target values.
exclude : Accept array of extensions to be excluded from converting into HTML anchor links.
rel : Same as the rel attribute. Will be added to all the URL links converted into anchor tags.

emoji

Default : true
Type : boolean
Set to false if you want to disable converting emoji codes into actual emojis.

customEmoji

Default : []
Type : Array
Include the names of custom emojis. Eg : ['emoji1', 'emoji2']. Now they can be used using :emoji1: :emoji2:

Setting up custom emojis

  • Add the image to assets/images/emojis. Make sure the name of the file is same as emoji name.
  • Pass the emoji name as the value to customEmoji. Eg : ['custom'] for emoji with image file name custom.png
  • Run grunt build-emoji && grunt build

fontIcons

Default : true
Type : boolean
Set to false to disable font icon embedding. Font icons refer to :), :/ , :( etc.

customFontIcons

Default : []
Type : Array
You can use your customised font icon with this plugin. You need to replace the default font files with yours and provide the code to icon mapping in the format :

customFontIcons:[{
    'text': ' :) ',
    'code': '&#xe60a'
}, {
    'text': ' :D ',
    'code': '&#xe608'
}, {
    'text': ' :d ',
    'code': '&#xe608'
}]

highlightCode

Default : false
Type : boolean
Set to true if you want to convert code blocks into formatted code. It uses highlight.js for code highlighting. Make sure highlight.js is loaded before embed.js if this option is set to true. The formats that it supports is single backticks and code blocks

```[optional-language-name]
//code here
```

videoJS

Default : false
Type : Boolean
Set to true if you want to enable video.js support for audio and video files. Make sure video.js is loaded before the plugin else the plugin will throw an error.

videojsOptions

Default :

{
		fluid  : true,
		preload: 'metadata'
}

Type : Object
This object is the video.js options. You can pass any option supported by video.js. Currently it will be applied to both audio and video files.

googleAuthKey

Default : ''
Type : String
When you are using a feature that uses google's API, you will need to pass this option.

This option is mandatory if you want to use youtube embedding or google map embedding. Else you need to turn off those services.

For turning off youtube embed, pass excludeEmbed: ['youtube'] and to turn off google-map embedding pass locationEmbed: false

locationEmbed

Default : true
Type : Boolean
Set whether you want to embed google maps. The format to follow for embedding google map with a location is @(locationName). @() will be automatically removed by the plugin.

mapOptions

Default

{
   mode               : 'place'
},

Can be any of 'place', 'view' or 'streetview'

tweetsEmbed

Default : true
Type : Boolean
Set to true if you want to embed tweets. Make sure you load http://platform.twitter.com/widgets.js if this option is set to true else the plugin will throw an error.

tweetOptions

Type : object
Default

{
    maxWidth           : 550,
    hideMedia          : false,
    hideThread         : false,
    align              : 'none',
    lang               : 'en'
}

Options for embedding tweets. Supports the options listed here

singleEmbed

Default : false
Type : Boolean
Set to true if you want to embed only one of the all services available in your string.

videoEmbed

Default : true
Type : Boolean
Set to false if you want to disable embedding supported video formats.

videoHeight

Default : null
Type : number
Set the height of the videos that are to be embedded and most of the other iframe embeds will also take the same dimensions.

videoWidth

Default : null
Type : number
Set the width of the videos that are to be embedded and most of the other iframe embeds will also take the same dimensions.

videoDetails

Default : true
Type : Boolean
If set to false the preview and the description of youtube and Vimeo videos will not be shown and instead the whole video will be embedded directly.

audioEmbed

Default : true
Type : Boolean
Set to false if you want to disable embedding supported audio formats.

excludeEmbed

Default : []
Type : Array/string
An array of all the services that you want to exclude from being embed. Eg : ['codepen','flickr','spotify']. If you want to exclude all the services then just set it to 'all'

inlineEmbed

Default : []
Type : Array/string
An array of all the services you want to embed inline. If you want to embed all services inline then set it to 'all'

inlineText

codeEmbedHeight

Default : null
Type : number
Set the height of all the code editing services. Eg : codepen , plunker, ideone, jsbin, jsfiddle.

vineOptions

Type : object
Default :

{
    maxWidth  : null,
    type      : 'postcard', //'postcard' or 'simple' embedding
    responsive: true,
    width     : 350,
    height    : 460
  }

The options for vine embedding.

plugins

Type : Object
Default :

{
    marked     : window.marked,
    videojs    : window.videojs,
    highlightjs: window.hljs,
    prismjs    : window.Prism,
    twitter    : window.twttr
}

Sometimes the globals of the 3rd-party plugins may not be available in the window object and you may want to pass them manually. You can specify those variables here. This is mainly useful when you are using Browserify, Webpack or Rollup.

soundCloudOptions

Type : object
Nothing much to explain here. The default options are:

{
    height      : 160,
    themeColor  : 'f50000', //Hex Code of the player theme color
    autoPlay    : false,
    hideRelated : false,
    showComments: true,
    showUser    : true,
    showReposts : false,
    visual      : false, //Show/hide the big preview image
    download    : false //Show/Hide download buttons
},

openGrapEndpoint

Default : ''
Type : String
For using the open graph support (fetching site's meta data) , you will have to set up your own server due to cross domain restrictions. This option takes the API template as the string where url is a variable.

openGraphExclude

Default : []
Type : Array
Urls that have the array items in their string won't be processed by the openGraph API.

openGraphFetch

Default : function(data){}
Type : Function
The data received from the server may need some modifications in structure that is supported by embed.js before being processed. You can do those changes here. The supported structure for success is :

{
  success:true,
  title:string,
  description:string,
  image:string,
  url:string
}

For error the structure is {success:false}

beforeEmbedJSApply

Default : function(data)
Type : Function
A function to be executed before the plugin is executed.

afterEmbedJSApply

Default : function(data)
Type : Function
A function to be executed after the plugin is executed.

onTweetsLoad

Default : function(data)
Type : Function
A function to be executed after the tweets have been embedded.

Options