JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/egAB2qtVWFQ" frameborder="0" allowfullscreen></iframe>
</div>
JavaScript
//import YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//create the YouTube Player
var player;
function onYouTubeIframeAPIReady() {
console.log("API is Ready");
player = new YT.Player("video", {
events : {
'onReady': onPlayerReady(),
'onStateChange': onStateChangeEvent()
}
});
}
function onPlayerReady() {
player.playVideo();
console.log("My plaer is onReady" );
}
function onStateChangeEvent(){
setInterval(function(){
var time = player.getCurrentTime();
//var volume = player.getVolume();
console.log("Get Current Time: " + time);
},1000);
}