youtube_control

HTML

<script src="//www.youtube.com/player_api"></script>
<script>
	//create the player object
	var player = {};

	//add functions to player on ready
	function onYouTubeIframeAPIReady() {
		player.ytcplayer1 = new YT.Player('ytcplayer1');
	}
	
	function myFunction() {
    var x = document.getElementById("myText").value;
    }    
</script>

<div style="height:72px;">
<a href="javascript: player.ytcplayer1.playVideo();">Play</a>
<a href="javascript: player.ytcplayer1.pauseVideo();">Pause</a>
<a href="javascript: player.ytcplayer1.stopVideo();">Stop</a>
First Name: <input type="text" id="myText" value="buraya video-id yaz">
<button onclick="myFunction()">Gonder</button>

<a href="javascript: player.ytcplayer1.loadVideoById({'videoId': 'nPgE8Jdzojc', 'suggestedQuality': 'large'});"> Change Video </a>

</div>

<iframe id="ytcplayer1" src="http://www.youtube.com/embed/NvQBJDeV6G4?&amp;autoplay=0&amp;theme=dark&amp;enablejsapi=1" style="position:fixed;"></iframe>

CSS

html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
iframe {
  width: 100%;
  height: 100%;
  border: none;
  display:block;
}