JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div id="howToVideo"></div>

<script type="application/javascript">

    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = false;
    ga.src = 'http://www.youtube.com/player_api';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);

    var done = false;
    var player;
    var interval;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('howToVideo', {
            height: '390',
            width: '640',
            videoId: 'xhdNa3iy5rw',
        playerVars: {
        },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        console.log('onPlayerReady', evt.target.getDuration());
        evt.target.seekTo(100);
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        console.log('onPlayerStateChange', evt);
        if (evt.data == YT.PlayerState.PLAYING) {
           interval = setInterval(function(){
           if(evt.target.getCurrentTime() >= 110) evt.target.seekTo(100);}, 10);
        }
        else clearInterval(interval);
    }
    
    function stopVideo() {
        console.log('stopVideo');
        player.stopVideo();
    }

</script>