Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.widgets.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