JSFiddle - React, Tailwind, and code Playground

by psyon001

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>


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

</body>
</html>

JavaScript

//Load player api asynchronously.
    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 done = false;
    var player;
    
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'h08rAYaXHZ0',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(e) {
        e.target.playVideo();
    }
    function onPlayerStateChange(e) {
        if (e.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 1000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }