alanshaw/embed-video

🎥 Get embed HTML code for youtube/vimeo/whatever from URL or ID

embed-video

Get embed code for embedding youtube/vimeo/dailymotion/whatever video in websites from URL or ID.

Currently supports YouTube, Vimeo and DailyMotion. Please pull request to add others!

Example

var embed = require("embed-video")

var vimeoUrl = "http://vimeo.com/19339941"
var youtubeUrl = "https://www.youtube.com/watch?v=twE64AuqE9A"
var dailymotionUrl = "https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport"

console.log(embed(vimeoUrl))
console.log(embed(youtubeUrl))
console.log(embed(dailymotionUrl))

var vimeoId = "6964150"
var youtubeId = "9XeNNqeHVDw"
var dailymotionId = "x20qnej"

console.log(embed.vimeo(vimeoId))
console.log(embed.youtube(youtubeId))
console.log(embed.dailymotion(dailymotionId))

Output:

<iframe src="//player.vimeo.com/video/19339941" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="//www.youtube.com/embed/twE64AuqE9A" frameborder="0" allowfullscreen></iframe>
<iframe src="//www.dailymotion.com/embed/video/x20qnej" frameborder="0" allowfullscreen></iframe>
<iframe src="//player.vimeo.com/video/6964150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="//www.youtube.com/embed/9XeNNqeHVDw" frameborder="0" allowfullscreen></iframe>
<iframe src="//www.dailymotion.com/embed/video/x20qnej" frameborder="0" allowfullscreen></iframe>

Usage

var embed = require("embed-video")

embed(url, [options])

Return an HTML fragment embed code (string) for the given video URL. Returns undefined if unrecognised.

embed.image(url, [options], callback)

Returns an HTML <img> tag (string) for the given url and the src in a callback. Works for youtube, vimeo and dailymotion. Returns undefined if unrecognised.

{
  src: http://img.youtube.com/vi/eob7V_WtAVg/default.jpg,
  html: <img src="http://img.youtube.com/vi/eob7V_WtAVg/default.jpg"/>
}

embed.info(url)

Returns an object containing the video ID, video source ("youtube", "vimeo", "dailymotion"), and the original url. Works for youtube, vimeo and dailymotion. Returns undefined if unrecognised.

{
  id: String,
  url: String,
  source: Enum "youtube", "vimeo", "dailymotion"
}

Options

query

Object to be serialized as a querystring and appended to the embedded content url.

Example

console.log(embed.vimeo("19339941", {query: {portrait: 0, color: '333'}}))

Output:

<iframe src="//player.vimeo.com/video/19339941?portrait=0&color=333" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

attr

Object to add additional attributes (any) to the iframe

Example

console.log(embed('https://youtu.be/jglUWD3KMh4', {query: {portrait: 0, color: '333'}, attr:{width:400, height:200}}))

Output:

<iframe src="//www.youtube.com/embed/jglUWD3KMh4?portrait=0&color=333" frameborder="0" allowfullscreen width="400" height="200"></iframe>

image

Youtube Image options

option	image
default
mqdefault
hqdefault
sddefault
maxresdefault

embedVideo.image('https://www.youtube.com/watch?v=ekETjYMo6QE', {image: 'mqdefault'}, function (err, thumbnail) {
  if (err) throw err
  console.log(thumbnail.src)
  // https://img.youtube.com/vi/ekETjYMo6QE/mqdefault.jpg
  console.log(thumbnail.html)
  // <img src="https://img.youtube.com/vi/ekETjYMo6QE/mqdefault.jpg"/>  
})

Vimeo Image options

option	image
thumbnail_small
thumbnail_medium
thumbnail_large

embedVideo.image('https://vimeo.com/19339941', {image: 'thumbnail_medium'}, function (err, thumbnail) {
  if (err) throw err
  console.log(thumbnail.src)
  // http://i.vimeocdn.com/video/122513613_200x150.jpg
  console.log(thumbnail.html)
  // <img src="http://i.vimeocdn.com/video/122513613_200x150.jpg"/>
})

DailyMotion Image options

option	image
thumbnail_60_url
thumbnail_120_url
thumbnail_180_url
thumbnail_240_url
thumbnail_360_url
thumbnail_480_url
thumbnail_720_url
thumbnail_1080_url

embedVideo.image('https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport', {image: 'thumbnail_720_url'}, function (err, thumbnail) {
  if (err) throw err
  console.log(thumbnail.src)
  // http://s1.dmcdn.net/IgPVQ/x720-d_h.jpg
  console.log(thumbnail.html)
  // <img src="http://s1.dmcdn.net/IgPVQ/x720-d_h.jpg"/>
})

Contribute

Feel free to dive in! Open an issue or submit PRs.

License

MIT © Alan Shaw

embed-video's Issues

Support more privacy with youtube-nocookie.com

youtube has an alternative embedding host (https://www.youtube-nocookie.com/) for more privacy focused embeddings (no tracking until video is played)

I'd suggest to add an option that would allow to switch to that host

Using `request` makes this only available in Node

We should use an AJAX library that works both in node and the browser.

http://andrewhfarmer.com/ajax-libraries/

Invalid URL causes error

When the the URL is invalid, we the error Uncaught TypeError: Cannot read property 'indexOf' of null. I'll add a fix for the issue.

IE11 CORS error fetching vimeo thumbnail image

Here's a strange one. On IE11, fetching the YouTube image works fine and returns an object {err: null, thumbnail: {...}}

But the exact same code requesting the thumbnail image from a vimeo video returns an error:
SEC7118: XMLHttpRequest for http://vimeo.com/api/v2/video/200927594.json required Cross Origin Resource Sharing (CORS).

This alternative code does work in IE11. It uses the jsonp API from Vimeo
http://jsfiddle.net/archatas/Tv7GZ/

I ended up using the npm module fetch-jsonp to fetch vimeo thumbs instead of embed-video. But you could patch your plugin using fetch-jsonp to get around this issue in IE11

import fetchJsonp from 'fetch-jsonp'
...
fetchJsonp('http://vimeo.com/api/v2/video/' + vimeoId + '.json')
.then((response)=> {
  return response.json()
}).then((json)=> {
  console.log('parsed json', json)
  let copiedState = Object.assign([],this.state.imageSources)
  copiedState[i] = json[0].thumbnail_small
  this.setState({imageSources: copiedState})
}).catch((ex)=> {
  console.log('parsing failed', ex)
})

Embed URLs are not parsed

It would be nice if the embed URL formats were also parsed, like:

• https://www.youtube.com/embed/LsBrT6vbQa8
• https://player.vimeo.com/video/250030285
• https://www.dailymotion.com/embed/video/x6uz6s2

@alanshaw if you agree, I can work on the PR.

Not parsing a Vimeo channel URL correctly

Runkit snippet demonstrating the issue: https://runkit.com/joshmcarthur/5ab866cb3331d600125707d3

What I did:

1. Went to vimeo.com, and clicked on one of the videos listed under "Discover today’s best videos" (this was the first place on the Vimeo homepage where I actually saw a video card I could click on)
2. Used the URL of the video I clicked on with embed-video - i.e. embed("https://vimeo.com/channels/staffpicks/185045662")

What I expected:

1. The embed function call to return embed code that renders the embedded video

What happened:

1. It returned an embed code that used "//player.vimeo.com/video/channels" as the iframe src
2. The iframe content displayed an error: "Oops! The embed code for this video is not valid."

I'm pretty sure this is just a matching issue. If no-one gets to this before my next free investment time slot, I'll be happy to prepare a patch :-)

Thanks for the library - it's working fantastically in every other scenario I've tried

Dailymotion support

Any chance you could look at adding dailymotion support?

Add support for instagram embeds

I'd be interested in submitting a pull request to support instagram embeds.

Those are a little trickier in that they require a script tag, which you usually don't want more than one of per-page. As part of that / allowing people more control over the output HTML I'd like to also submit a pull request exposing the function that converts urls to their embeddable versions to the user. Something like this

var embed = require('embed-video');
embed.url(/* youtu.be url */) // returns youtube.com/embed url

Though there may be better ways to handle that, and it may be useful to also return the video "type" ('youtube', 'vimeo', etc) in some cases.

Let me know if either / both would be welcome.

will you accept getting vimeo thumbnail pr?

can easily be done but need to call theire api like http://vimeo.com/api/v2/video/151850021.json