.top-video-container {
    height: 100%; /* 高さを画面いっぱいに指定する。(vhが効かない場合の対策) */
    height: 100vh; /* 高さを画面いっぱいに指定する。*/
    position: relative;  /* 横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/
    width: 100%; /* 横幅もいっぱいに。*/
}

#video {
    background-attachment: fixed; /* 中央揃えになるように、fixed。*/
    background-position: center center; /* positionも中央に。*/
    background-size: cover; /* 画面サイズに応じてサイズを可変するように設定。*/
    left: 0;
    /* 以下、画面いっぱいにするためのCSS設定*/

    /*
    min-height: 100%;
    min-height: 100vh;
    min-width: 100%;
    min-width: 100vw;
    */

    /* wrapperのサイズに応じて、leftの位置をjQueryで指定するため、positionはabsoluteに*/
    position: absolute;
    bottom: 0;
    /* z-indexは調整してください。*/
    z-index: 1;
}

.pattern {
    width: 100%;
    height: 100%;
    background: url("https://www.blanctec.co.jp/images/pc/white_pattern.png");
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    text-align: center;
}

.pattern img {
    width: 100%;
    max-width: 80%;
}