funkymed-youtube-player
v1.0.8
Published
Manage and control a Youtube-Player in React
Downloads
19
Maintainers
funkymedReadme
Youtube Player
Author : Cyril Pereira
Control the Youtube Player only by code and without iframe. You can custom the player, make your own. You can get all the informations, title, length, currentTime and state.
url of the package npm : https://www.npmjs.com/package/funkymed-youtube-player
Demo
http://medcg.free.fr/tmp/npm-youtube-player/
Install
First of all in your root page of react you will need to add this in your header
<head>
<script type="text/javascript" src="//www.youtube.com/player_api"></script>
<script type="text/javascript">
var youtubePlayerReady = false;
function onYouTubeIframeAPIReady() {
youtubePlayerReady = true;
}
</script>
</head>yarn add funkymed-youtube-player --saveAnd in your compennent add those lines in the render
import 'funkymed-youtube-player/dist/YoutubePlayer'
//...
render(){
return (
<div>
<YoutubePlayer code="Zrock_tnsSQ" />
</div>
);
}Build
yarn buildTest
yarn startin your browser go the url http://localhost:3001/
Demo
The component in action : http://medcg.free.fr/tmp/npm-youtube-player
Options
{
width:640,
height:360,
loop:false,
autoplay:true,
controls:true,
showinfo:true,
theme:'dark', // dark or light
start:0, // where the video start
policy:3, // 1 or 3
rel:0 // 0 or 1 Display related video at the end
}Check the example to have a full information about implementation