youtubu全幅で表示

<section id="home">
<div class="video-box overlay">
<div id="yt_player"></div>
<div class="player-overlay"></div>
</div>
</section>

JS　footerに入れる　※mKM62XwyNjE　は動画ID、入れる動画によって変えて
<script>
// YouTube APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// iframe player APIコードを非同期で読み込みます。
var player;

function onYouTubeIframeAPIReady() {
// 動画を埋め込む場所を指定
player = new YT.Player('yt_player', {
width: '100%', // 追加
height: '100%', // 追加
// YouTubeの動画IDを入れる
videoId: 'mKM62XwyNjE',
// オプションを設定する場所
playerVars: {
playsinline: 1,
loop: 1,
listType: 'playlist',
playlist: 'mKM62XwyNjE', // リピートするには入力必須
rel: 0, // 関連動画の非表示
controls: 0, // 動画プレーヤーのコントロール非表示
},

events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

// プレーヤの準備完了後に呼び出す関数
function onPlayerReady(event) {
event.target.mute(); // ミュートにしないとスマホで再生されない
event.target.playVideo(); // ビデオを再生
}

var done = false;

function onPlayerStateChange(event) {
var ytStatus = event.target.getPlayerState();
if (ytStatus == YT.PlayerState.ENDED) {
event.target.mute(); // ミュートにしないとスマホで再生されない
event.target.playVideo(); // ビデオを再生
}
}
</script>

CSS
.video-box.overlay {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

#yt_player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.player-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}