Giter Site home page Giter Site logo

luodevin / embed-video Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alanshaw/embed-video

0.0 0.0 0.0 130 KB

๐ŸŽฅ Get embed HTML code for youtube/vimeo/whatever from URL or ID

Home Page: http://npm.im/embed-video

License: MIT License

JavaScript 100.00%

embed-video's Introduction

embed-video

Build Status devDependency Status JavaScript Style Guide

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 People

Contributors

alanshaw avatar bmordan avatar idealley avatar treyhuffine avatar joshmcarthur avatar samirhodzic avatar kanaabe avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.