Skip to content

Instantly share code, notes, and snippets.

@bijection
Last active August 25, 2016 13:35
Show Gist options
  • Save bijection/bae03af5387990320fd8e1efd961397b to your computer and use it in GitHub Desktop.
Save bijection/bae03af5387990320fd8e1efd961397b to your computer and use it in GitHub Desktop.
Creating a Youtube Widget
import React from 'react'
function ytId(url){
var matchYt = /^(http(s)?:\/\/)?((w){3}\.)?youtu(be\.com\/watch\?v=|\.be\/)(\w+)$/
var parts = matchYt.exec(url)
return parts && parts[parts.length-1]
}
class YoutubeWidget extends React.Component {
static title = "Youtube";
static match(value, ast){
return value
&& typeof value == 'string'
&& ytId(value)
}
render(){
return <iframe style={{border: 0}} src={"https://www.youtube.com/embed/"+ytId(this.props.value)} />
}
}
export function __unload(){ ///This cleans everything up so we can run this cell multiple times.
var index = doc.kernel.widgets.indexOf(YoutubeWidget)
doc.kernel.splice(index, 1)
}
doc.kernel.widgets.unshift(YoutubeWidget)
'https://www.youtube.com/watch?v=c1ZlqXyj_FI'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment