youtube動画を背景で幅100%にしてトップページに設定する方法（左右の黒帯も消して動画も縮まないように）

YouTubeの動画を背景動画として全画面に表示する方法

↑こちら参考にしました。

カミチクさんは、
↓こちらTubular.jsを使っている

参考URL

LAB#001背景全体にYoutube動画を利用したページ作成[jquery-tubular]

[jQuery]背景にYouTube動画を設定できるjQueryプラグイン – jquery-tubular

【レスポンシブ対応】背景にYoutubeを全画面で表示するjQueryプラグイン『Tubular.js』の使い方

tublarでスクロールさせたいときは、こちらも要確認！！

YouTube 動画を要素の背景に設定する方法（ jQuery ）

tublar.jsの42行目を修正してうまくいった。

// build container
        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: -10; width: 100%; height: 100vh"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100vh; z-index: -10; position: absolute; left: 0; top: 0;"></div>';
 
        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('#header').css({'width': '100%', 'height': '100vh'});

tublarはwrapに指定した。

<script>
$().ready(function() {
$('#wrap').tubular({videoId: 'tO4NNr6egKQ'});
});
</script>

tublarの動画の上に網掛けをしたかったので、header_areaに網掛けのpng画像をcssのbackgroundで指定した