JSFiddle - React, Tailwind, and code Playground

by Satheesh Kumar

HTML

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<div id="player" data-youtube="0AyhUXw_zSY"></div>
<div id="playerTwo" data-youtube="0Bmhjf0rKe8"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>
    

	        var player;
          	        var playerTwo;

     function onYouTubePlayerAPIReady() {
     player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId:  '0AyhUXw_zSY',
          autoplay: 1,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
     $('[data-youtube]').each(function(){


/* 
         var a = $(this).attr('data-youtube');
        var b = $(this).attr('id');
        player = new YT.Player(b, {
          height: '390',
          width: '640',
          videoId:  a,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        }); */

        })
    }

 


    // create youtube player

   
    // autoplay video
    function onPlayerReady(event) {
    console.log(event.target)
console.log($('#player'))
					        event.target.playVideo();        

    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            alert('done');
        }
    }
    
</script>