JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player"></div>

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

<script>
    
    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            $('html, body').animate({
                scrollTop: $("#elementtoScrollToID").offset().top
            }, 2000);
        }
    }
    
</script>

<div id='elementtoScrollToID' class='my_div'> Hello! </div>

CSS

.my_div {
    width: 80%;
    height: 100px;
    background: #009900;
    margin: 500px auto;
    text-align: center;
    color: #fff;
    line-height: 100px;
    font-size: 50px;
}