Youtube JavaScript API我无法使其响应和集中。

Question

我正在尝试实施Youtube视频，并且我试图让视频居中并完全响应，我让它工作但仍然没有完全响应。

＆＃13;

＆＃13;

  // 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'
      });
  }

＆＃13;

	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;
	

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

它在某些屏幕尺寸上工作正常，但我无法让它完全响应

任何帮助或建议