Youtube JavaScript API i can't make it responsive and centered

  // 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('vid', {
          Width: '100%',
          Height: '100%',
          videoId: '6JK-nkvs-UY'
      });
  }

	body {
	    margin: 0px;
	}
	.openFrame {
	    display: table;
	    position: absolute;
	    height: 100%;
	    width: 100%;
	    background-color: yellow;
	    background-position: center;
	    background-size: cover;
	}
	.main {
	    display: table-cell;
	    vertical-align: middle;
	}
	.inner {
	    margin-left: auto;
	    margin-right: auto;
	    text-align: center;
	}
	#cta {
	    width: 85%;
	    height: 6em;
	    background-color:black;
	    background-repeat: no-repeat;
	    background-position: top center;
	    background-size: contain;
	    cursor: pointer;
	}
	.videoCon {
	    position: relative;
	    z-index: 9999999;
	}
	#vid {
	    width: 90%;
	    max-height: 100%;
	    margin: auto;
	    display: table-cell;
	    vertical-align: middle;
	}
	#bottom {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    cursor: pointer;

<div class="openFrame"><div class="main"><div class="inner"><div class="videoCon"><div id="vid"></div><div class="inner" id="cta"></div></div></div></div>