This Gist was automatically created by Carbide, a free online programming environment.
You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/7220788cf9d771a1b6829cf870603b2d).
This Gist was automatically created by Carbide, a free online programming environment.
You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/7220788cf9d771a1b6829cf870603b2d).
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 <div><b>Hello!</b><iframe style={{border: 0}} src={"https://www.youtube.com/embed/"+ytId(this.props.value)} /></div> | |
} | |
} | |
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' |