JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div id="player"></div>
<form action="https://www.youtube.com/results" method="post">
  <input type="text" name="search_query" value="value">
  <input type="submit">
</form>
<script>
	var base = document.createElement('base');
  base.setAttribute('target', '_blank');
  var head = document.documentElement.firstChild.appendChild(base);
  console.log(head);
  
	var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

CSS

#player {
  //visibility: hidden;
}

JavaScript

(function() {
	var videoId = 'Tu1WDLj6c5Q';
	var player;
	function onYouTubePlayerAPIReady(videoId) {
  	player = new YT.Player('player', {
    	playerVars: { 'autoplay': 1, 'controls': 1,'autohide':1,'wmode':'opaque' },
      	videoId: videoId,
       	events: {
        	'onReady': onPlayerReady
        }
  	});
	}
  function onPlayerReady(event) {
  	//event.target.mute();
  }
  onYouTubePlayerAPIReady(videoId);
  
  var form = document.forms[0];
  var qs = '?search_query=hgicht';
  var xhr = new XMLHttpRequest();
  
  })();