スマートフォン（iPhone）で動画が再生されない

前提・実現したいこと
Webサイトにvideoタグを使用して埋め込んだ動画を、スマホで再生したい

発生している問題・エラーメッセージ
PCでは問題なく再生されるのですが、スマホ（iPhone）だと再生されません
動画の拡張子はmp4です

該当のソースコード

HTML
1<div class="video-container">
2      <video src="image/airbnb-video.mp4" autoplay playsinline muted loop></video>
3      <div class="video-sidebar">
4        <nav class="navbar navbar-expand-lg">
5          <a class="navbar-brand" href="#"><i class="fab fa-airbnb fa-2x" style="color: #ffffff;"></i></a>
6          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
7            <span class="navbar-toggler-icon"></span>
8          </button>
9
10          <div class="collapse navbar-collapse" id="navbarSupportedContent">
11            <ul class="navbar-nav">
12              <li class="nav-item active">
13                <a class="nav-link" href="#"><i class="fas fa-globe" style="color: #ffffff;"></i>&nbsp;日本語（JP）<span class="sr-only">(current)</span></a>
14              </li>
15              <li class="nav-item">
16                <a class="nav-link" href="#"><span class="f-span">¥</span>JPY</a>
17              </li>
18              <li class="nav-item">
19                <a class="nav-link" href="#">ホストをはじめる</a>
20              </li>
21              <li class="nav-item">
22                <a class="nav-link" href="#">ヘルプ</a>
23              </li>
24              <li class="nav-item">
25                <a class="nav-link" href="#">登録する</a>
26              </li>
27              <li class="nav-item">
28                <a class="nav-link" href="#">ログイン</a>
29              </li>
30            </ul>
31          </div>
32        </nav>
33
34        <div class="content">
35          <h1 class="h1-title">世界の果てまで、アットホーム</h1>
36          <p class="h-sub"><a href="#" style="font-weight: 600;">Airbnbビジネスプログラムの動画を見る</a></p>
37          <label style="font-weight: 600; color: #ffffff;">まずは仕事用メールアドレスの入力から</label>
38              <div class="input-group" style="width: 40%">
39                <input type="e-mail" class="form-control">
40                <div class="input-group-prepend">
41                  <button class="btn" style="background-color: #BEDADC;padding: 5px 20px;margin: 10px;border-radius: 5px;color: #ffffff;">メールアドレスを追加</button>
42                </div>
43              </div>
44              <p class="h-sub">出張管理をご担当ですか？<a href="#">もっと詳しく</a></p>
45        </div>
46      </div>
47     </div>
48
49    
50
51    <div class="content-smafo">
52      <section class="smafo-tab">
53      <h1 class="smafo-title">世界の果てまで、アットホーム</h1>
54      <p class="smafo-p">Airbnbビジネスプログラムの動画を見る</p>
55      </section>
56    </div>
57
58    <div class="container content-smafo2">
59      <div class="row">
60        <div class="col-xs-8" style="margin: 15px;">
61          <label style="font-weight: 600;">まずは仕事用メールアドレスの入力から</label>
62          <div class="input-group" style="border: 1px solid #ebebeb; border-left: none;">
63            <input type="e-mail" class="form-control" style="border: 1px solid #ebebeb; border-right: none;">
64            <div class="input-group-prepend">
65              <button class="btn" style="background-color: #BEDADC;padding: 5px 20px;margin: 10px;border-radius: 5px;color: #ffffff;">メールアドレスを追加</button>
66            </div>
67          </div>
68          <p class="h-sub" style="color: #484848; margin-bottom: 0; padding: 10px 0 0 0;">出張管理をご担当ですか？</p>
69          <a href="#">もっと詳しく</a>
70        </div>
71      </div>
72    </div>

CSS
1.video-container {
2	position: relative;
3  }
4  
5  .video-sidebar {
6	position: absolute;
7	top: 0;
8	left: 0;
9	height: 100%; 
10  }
11  
12  video {
13	width: 100%;
14  }
15
16  .fa.fa-airbnb {
17    color: #ffffff;
18  }
19
20  .navbar-nav {
21    font-weight: 700;
22    margin-left: 800px;
23  }
24
25
26  .nav-link {
27    text-decoration: none;
28    font-size: 14px;
29    color: #ffffff;
30  }
31
32  .content {
33    padding-top: 300px;
34    padding-left: 200px;
35  }
36
37  .h1-title {
38    font-size: 46px;
39    color: #ffffff;
40    padding-bottom: 10px;
41  }
42
43  .h-sub {
44    font-size: 16px;
45    color: #ffffff;
46    padding: 10px;
47  }
48
49  .h-sub a {
50    font-size: 16px;
51    color: #ffffff;
52  }
53
54
55  .content-smafo {
56    display: none;
57  }
58
59  
60
61@media screen and (max-width:780px) {
62     
63  
64
65
66  /* header */
67
68  video {
69    height: 100%;
70  }
71
72
73
74
75  .content {
76    padding: 0;
77    display: none;
78  }
79
80  .navbar, .navbar-toggler {
81    display: none;
82  }
83
84  .content-smafo {
85    display: block;
86    position: relative;
87  }
88
89  .smafo-tab {
90    position: absolute;
91    bottom: 20px;
92    width: 250px;
93    padding-left: 20px;
94  }
95
96  .smafo-title {
97    font-size: 20px;
98    color: #ffffff;
99    font-weight: 600;
100  }
101
102  .smafo-p {
103    font-size: 15px;
104    color: #ffffff;
105  }
106
107  .content-smafo2 {
108    display: block;
109    margin: 30px;
110  }
111
112 
113  }