JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="bg_utube">
    <div id="player"></div>
    
    <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        var video_id = 'JQ7a_8psCn0';

        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: video_id,
                playerVars: {
                    'autoplay': 1,
                    'controls': 0,
                    'html5': 1,
                    'modestbranding': 1,
                    'showinfo': 0,
                    'related': 0},

                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            event.target.playVideo();
            player.mute();
            event.target.setPlaybackQuality('hd720');
        }

        function onPlayerStateChange(event) {

            if (event.data == YT.PlayerState.PLAYING ) {

            }

            if(event.data === YT.PlayerState.ENDED){
                player.loadVideoById(video_id);
            }
        }
    </script>
</div>
</body>

CSS

body,html{ margin:0; padding:0; height:100%;}

div.bg_utube {
    position: fixed;
    z-index: -99999;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
}
#player{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}