JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<link href="../assets/styles.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<style>
        @media screen and (min-width: 1024px) {
            .player {width:100%;height:350px;}
    }
        @media screen and (max-width: 768px) {
            .player {width:100%;height:325px;}
    }

    @media screen and (max-width: 450px) {
            .player {width:100%;height:215px;}
    }
		#video-data-1 p { white-space: pre-line; }
	</style>
</head>
<body>
	<div id="search-bar" style="display:none;">
		<input id="search-txt" type="text" value="https://www.youtube.com/watch?v=gzDS-Kfd5XQ" maxlength="100">
		<input id="search-btn" type="button" value="Fetch Video Information">
	</div>
  <div><h3 id="text-video"></h3></div>
  <div id="player" class="player"></div>
	<div id="video-data-1"></div>
  
  <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          videoId: 'TYJxrJr6rLs',
          playerVars: {
          showinfo: '0',
          autoplay: '0'
          },
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        document.getElementById( "text-video" ).innerText = player.getVideoData().title;
        document.getElementById("search-txt").value= player.getVideoUrl();
      }
    </script>
</body>
</html>