React Tube Embed
ReactJS library for embed Tube video's in your React application.
Usage
Load media directly into your ReactJS application by using the TubeEmbed tag. Pass an URL or text with an url in it (or not, I won't mind) in the src prop. The rest will be handled by the component. See the examples below for more details and other usefull functions.
An div will be return with the class tube-embed. You can still use the className and style prop for adding custom styling. Within the div will be the embedding media, in most cases this will be an iframe depending on the media source. Some sources such as Giphy this will be an img tag. Styling has to be done by yourself.
Supported tubes
- Youtube
- Vimeo
- Dailymotion
- Spotify
- Giphy
Feel free to request more tubes.
ES6 Examples
Embedding ...
import TubeEmbed from 'react-tube-embed';...<TubeEmbed ="https://www.youtube.com/watch?v=lmc21V-zBq0" /><TubeEmbed ="https://youtu.be/lmc21V-zBq0" /><TubeEmbed ="Check this, https://youtu.be/lmc21V-zBq0 :D!" /><TubeEmbed ="https://vimeo.com/42615527" /><TubeEmbed ="Hello World, I will be ignored!" /><TubeEmbed ="http://www.dailymotion.com/video/x11jxof" /><TubeEmbed ="https://giphy.com/gifs/happy-smile-P8MxmGnjmytws/" /><TubeEmbed ="Some good jams https://open.spotify.com/user/spotify/playlist/37i9dQZF1DWWrJKwf0q9nn" />Other functions ...
import TubeEmbed stripURL stripText hasURL parseMediaURL from 'react-tube-embed';...let text = "Check this video! https://www.youtube.com/watch?v=lmc21V-zBq0 It's awesome!";let textWithoutURL = ;let urlWithoutText = ;let textHasValidURL = ;let mediaData = ;