背景動画をスマホ表示の時に全体的に映るようにしたい

ファーストビューの背景動画をスマホで見た時もう少し全体が映るようにしたいです。

動画全て映らなくていいので、現在の表示よりズームアウトした形で全体が映るようにしたいです。

高さは変わってもよいのでもう少し引きの状態の背景動画をスマホで見た時全体を映したいです。

position: fixed;で背景が固定されているようなパララックスにしています。

こちらのサイトになります。リンク内容

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <meta http-equiv="Pragma" content="no-cache">
9  <meta http-equiv="Cache-Control" content="no-cache">
10  <link rel="stylesheet" href="css/animate.css">
11  <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
12    <!-- スライドショー -->
13    <link rel="stylesheet" href="./css/vegas.min.css">
14  <link rel="stylesheet" href="css/index.css" />
15  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
16  <title>【公式】</title>
17</head>
18
19<body>
20  <header>
21    <!-- ヘッダーロゴ　-->
22    <h1>
23      <a href="" class="en_txt page_title">デモサイトデモサイト</a>
24    </h1>
25    <nav class="header-nav">
26      <ul class="nav-list">
27        <li class="nav-item"><a class="en_txt" href="">TOP</a></li>
28        <li class="nav-item"><a class="en_txt" href="http://monakadesign.sakura.ne.jp/index.html#gallery">GALLERY</a>
29        </li>
30        <li class="nav-item"><a class="en_txt" href="http://monakadesign.sakura.ne.jp/index.html#profile">PROFILE</a>
31        </li>
32        <li class="nav-item"><a class="en_txt" href="http://monakadesign.sakura.ne.jp/index.html#school">SCHOOL</a></li>
33        <li class="nav-item"><a class="en_txt" href="php/contact.php">CONTACT</a></li>
34      </ul>
35    </nav>
36    <!-- ハンバーガーメニュー　-->
37    <button class="burger-btn">
38      <span class="bar bar_top"></span>
39      <span class="bar bar_mid"></span>
40      <span class="bar bar_bottom"></span>
41    </button>
42
43  </header>
44
45  <div class="bg-slider">
46    <a href="#movie" id="rect">
47      <span class="arrow_line fede"></span>
48      <span class="arrow_txt fede en_txt">Scroll</span>
49    </a>
50    <video class="mv-bg" src="./css/サーフィン動画Top.mp4" autoplay playsinline muted loop></video>
51
52    <div class="mv-content">
53      <p class="title_en fede en_txt">デモサイト</p>
54      <div class="bg-slider__title fede">デモサイトです</div>
55    </div>
56  </div>
57  <div style="background:#FFF;">
58
59    <div class="gallery-wrapper" id="gallery">
60      <div class="fadein">
61        <h1 class="fadein en_txt">GALLERY</h1>
62        <h2 class="fadein"> × gallery </h2>
63      </div>
64      <div class="gallery_inner ">
65      </div>
66    </div>
67  </div>
68    <!-- トピックス -->
69    <div style="background:#FFF;">
70    <div class="section-wrapper" id="news">
71      <div class="fadein">
72        <h1 class="fadein en_txt">NEWS & TOPICS</h1>
73        <h2 class="fadein">× news × topics</h2>
74      </div>
75      <div class="section-inner">
76        <h3 class="section-title fadein">最新情報</h3>
77        <div class="news-wrapper">
78          <dl class="news-list">
79          </dl>
80        </div>
81      </div>
82    </div>
83  </div>
84  <!-- スクール -->
85   <div class="school-wrapper" id="school">
86    <div class="school-container fadein">
87      <h1 class="fadein en_txt">SURFING SCHOOL</h1>
88      <h2 class="fadein">School × Coaching ×</h2>
89      <div class="school-message fadein">
90        <p>「少し経験したけど難しくて楽しくなかった。」から「サーフィンってこんなに楽しいんだ！」へ<br>
91          「基本マニューバー（リッピング・カービング・カットバック等）を中心にエアリアル等の高等テクニックまで」<br>
92          ライフスタイルであるサーフィンをもっと楽しくなるようにサポートさせて頂きます。</p>
93      </div>
94      <div class="school-btn fadein">
95        <a href="php/contact.php" class="btn">スクール ＆ コーチング & 各種問い合わせはこちら</a>
96      </div>
97    </div>
98  </div>
99  <div class="school-bottom">
100
101  </div>
102    <!-- フッター -->
103  <div style="background:#FFF;">
104
105    <footer>
106      <div class="footer-menu">
107        <p>©ryota.matsushita.surfingschool.com ALL RIGHTS RESERVED.</p>
108      </div>
109    </footer>
110  </div>
111
112
113  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
114  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
115  
116  <!-- スライドショー -->
117  <script script type="text/javascript" src="./js/vegas.min.js"></script> 
118  <script src="js/jquery.textillate.js"></script>
119  <script src="js/jquery.lettering.js"></script>
120  <script type="text/javascript" src="js/index.js"></script>
121</body>
122
123</html>
124

CSS
1.bg-slider {
2  width: 100%;
3  height: 100vh;
4  overflow: hidden;
5  position: relative;
6}
7img{
8  width: 100%;
9  vertical-align: bottom;
10}
11video {
12  width: 100%;
13}
14.mv-bg{
15    position: fixed;
16    top: 0;
17    right: 0;
18    bottom: 0;
19    left: 0;
20    height: 100vh;
21    object-fit: cover;
22    margin: auto;
23    min-width: 100vw;
24    width: 100%;
25    height: 100%;
26    z-index: -1;
27}