スマホで動画が表示されない(videoタグ)

TOPページに<video>を使用して動画を表示させたいです。
PCはうまくいきましたがスマホがうまくいきません（検証：iphoneでsafari chrome）
動画部分がぽっかりと白く空いている状態です。

HTML
1<div id="video_wrap" class="clearfix">
2    <h1 class="video_copy">キャッチコピー・キャッチコピーキャッチコピー・キャッチコピー<br>
3    <span class="top_subcopy">キャッチコピー・キャッチコピー</span></h1>
4    <div id="video" class="boxSizing">
5    <video autoplay="autoplay" muted="muted" loop="loop" poster="images/top.jpg">
6        <source src="https://www.＊＊＊＊＊＊.com/movie/crusis.mp4" type="video/mp4">
7        <source src="https://www.＊＊＊＊＊＊.com/movie/crusis.ogv" type="video/ogv">
8        <source src="https://www.＊＊＊＊＊＊.com/movie/crusis.webm" type="video/webm">
9        <img src="images/top.jpg" alt=""> </video>
10    <div id="bottom_img" style="left: -933px;"><img src="images/video_bg.png"></div>
11  </div>
12 </div>
13

CSS
1.video_copy{
2color: #fff;
3    font-size: 61px;
4    position: absolute;
5    top: 190px;
6    z-index: 10;
7    left: 0;
8    right: 0;
9    bottom: 0;
10    margin: auto;
11    text-align: center;
12    letter-spacing: 6px;
13    line-height: 1.25;
14}
15
16
17
18.top_subcopy{
19    font-size: 30px;
20	text-align: center;
21
22}
23
24@media screen and (max-width: 768px) {
25.video_copy{
26    font-size: 24px;
27	top: 116px;
28}
29}
30
31@media screen and (max-width: 768px) {
32.top_subcopy{
33    font-size: 16px;
34}
35}
36
37
38
39
40#video {
41    margin: 0 auto;
42    position: relative;
43    width: 100%;
44}
45
46
47
48.videoside_img.left {
49    right: 960px;
50}
51
52
53
54#video video {
55    width: 100%;
56    vertical-align: bottom;
57}
58
59.videoside_img.right {
60    left: 960px;
61}
62
63
64.right {
65    text-align: right;
66}
67
68
69#video #bottom_img img {
70    position: absolute;
71    width: 100%;
72    bottom: -2px;
73}