experimental/ytplayer.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="loadVideo()">Load video</button>
    <div id="ytplayer"></div>
    <script>
      function loadVideo() {
        player.loadVideoById("Ayp719ei-BU");
      }
      // Load the IFrame Player API code asynchronously.
      var tag = document.createElement("script");
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // Replace the 'ytplayer' element with an <iframe> and
      // YouTube player after the API code downloads.
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player("ytplayer", {
          height: "500",
          width: "700",
          videoId: "",
          playerVars: {
            autoplay: 1,
            showinfo: 0,
            controls: 1
          }
        });
      }
    </script>
  </body>
</html>