youtube_control

HTML

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


//add functions to player on ready

function onYouTubeIframeAPIReady() {
  player.ytcplayer1 = new YT.Player('ytcplayer1');
}

function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("ytcplayer1").src = "//www.youtube.com/embed/" + x + "?&amp;autoplay=0&amp;theme=dark&amp;enablejsapi=1";
}
</script>
<div style="height:72px;">
    <button onclick="player.ytcplayer1.playVideo();">Play</button>
    <button onclick="player.ytcplayer1.pauseVideo();">Pause</button>
    <button onclick="player.ytcplayer1.stopVideo();">Stop</button>
    First Name: <input type="text" id="myText" value="buraya video-id yaz">
    <button onclick="myFunction()">Gonder</button>
</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;
}