JSFiddle - React, Tailwind, and code Playground

by ko echos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="player"></div>
<input type="text" name="yidx" value="0" id="yidx" />
<button id="button">play</button>

CSS

div {
    width:250px;
    height:700px;
    background-color: yellow;
}

JavaScript

var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    
    var live_player;
    var player;
    var playList = [];

    window.onYouTubeIframeAPIReady = function() {
/*
    function onYouTubeIframeAPIReady() {
*/
        //console.log('call onYouTubeIframeAPIReady');

        player = new YT.Player('player', {            
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
/*
    function onPlayerReadyLive(event) {
        player.playVideo();
        //live_player.mute();
    }    
*/

		$('#button').click(function(){
    	loadPlaylistByAction();
    });

    function loadPlaylistByAction() {    
      player.loadPlaylist({
      	autoplay:1,
        playlist:["r7nKRahipco", "oJnhoD-c0xU"]
      });
    }

    function onPlayerReady(event) {
    /*
      playList.push('6JzthGkuqF0');
      playList.push('goXRsnd9cQw');
      playList.push('DzCc9cg4SgQ');
      playList.push('cZvhC4IAkNk');
      playList.push('rftEKG3hllc');
      playList.push('B1rvt4tDFl0');
      playList.push('lBRuSGggz5o');
      playList.push('UkQK3NwwmyQ');
      playList.push('RzqaH2svGT4');
      playList.push('EONnX2-Myj0');
        
      player.loadPlaylist(playList, 2);
*/
      player.mute();

        //console.log(playList);
        //player.mute();

        // if(ytCnt >= yt_array.length){
        //     $.cookie('ytCnt', '0', { expires: 1, path: '/' });
        //     player.loadPlaylist(playList, 0);
        // }else{
        //     player.loadPlaylist(playList, ytCnt);
        //     player.mute();
        // }
    }
    function onPlayerStateChange(event) {
        //현재 동영상 index
        var getPlaylistIndex = player.getPlaylistIndex();

        //동영상 순서 쿠키저장
        $.cookie('ytCnt', getPlaylistIndex +...