<input type="text" id="link" placeholder="link/id">
<button onclick="play()">play</button>

<br><br>

<div id="ytplayer"></div>

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  function obtainId() {
    var userInput = document.getElementById('link').value;
    if (userInput.startsWith('https') || userInput.includes('/')) {
        var parts = userInput.split('/');
        var last = parts[parts.length - 1];
        if (last == '/') {
            return parts[parts.length - 2].replace('watch?v=', '');
        } else {
            return last.replace('watch?v=', '');
        }
    } else {
        return userInput;
    }
  }
  
  var player;
  function play() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: obtainId()
    });
  }
</script>