JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<style>
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
<div class="video-container" style="margin-bottom: 1em;">
    <div id="player"></div>
</div>
<script>
    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 player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            // height: '390',
            // width: '640',
            // videoId: 'M7lc1UVf-VE',
            videoId: 'nLy3OQYsXWA',
            playerVars: {
                modestbranding: 1,
                autoplay: 0,
                controls: 1,
                enablejsapi: 1,
                rel: 0
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        // event.target.playVideo();
        console.log("Player is ready");
    }

    var done = false;

    function onPlayerStateChange(event) {
        // console.log(event.data); 1 play, 2 pause, 3 move??
        // https://developers.google.com/youtube/iframe_api_reference (onStateChange)
        /*if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }*/
    }

    function stopVideo() {
        player.stopVideo();
    }

</script>
<ul>
    <li><span class="javascript_link" onclick="player.seekTo(90, true );player.playVideo();">global expansion</span></li>
    <li><span...

CSS

.javascript_link {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}