视频div在Firefox中无法正确呈现，但在chrome中呈现得很好

Question

我有一个项目，我正在努力，我很难过。我有一个不在firefox中定位的视频，但在Chrome中它是完美的。这是Firefox version这里是Chrome version 我不确定他们为什么渲染方式不同。 以下是html模板该部分的代码段：

<div ui-view>
    <div ng-controller="mainController" class="container">
        <div class="main_page">
            <div class="jumbotron">
                <video autoplay playsinline muted loop>
                    <source src="vid/peer2package_video.mp4" type="video/mp4">
                </video>
                <h1>Peer2Package</h1>
                <p>Earn money for driving your car!</p>
            </div>
            <div class="logo_section">
                <div class="logos">
                    <div id="buy" class="front_logo"><img src="img/buy.svg">
                        <p>BUY</p>
                    </div>
                    <div id="sell" class="front_logo"><img src="img/sell.svg">
                        <p>SELL</p>
                    </div>
                    <div id="deliver" class="front_logo"><img src="img/deliver.svg">
                        <p>DELIVER</p>
                    </div>
                </div>
            </div>
            <div id="buy_things" class="main_section">
                <div class="column_one logo"><img src="img/buy.svg">
                    <p>BUY</p>
                </div>
                <div class="column_two text">
                    <p> Buy things and get them sent directly to you!</p>
                </div>
            </div>
            <div id="sell_things" class="main_section">
                <div class="column_one text">
                    <p> Sell things and no more customers complaining about the wait time!</p>
                </div>
                <div class="column_two logo"><img src="img/sell.svg">
                    <p>SELL </p>
                </div>
            </div>
            <div id="deliver_things" class="main_section">
                <div class="column_one logo"><img src="img/deliver.svg">
                    <p>DELIVER</p>
                </div>

这是css：

div.container {
  width: 100%;
  height: 100%;
  margin-top: 70px;
}

div.main_page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

div.jumbotron {
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  background-color: #1c283b;
  margin-bottom: 40px;
  z-index: 9980;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
}

div.jumbotron h1 {
  color: #fff;
  font-size: 2.9em;
  position: absolute;
  margin-top: -5px;
  z-index: 9987;
}

div.jumbotron p {
  margin-top: 90px;
  font-size: 1.3em;
  z-index: 9988;
}

非常感谢任何帮助。谢谢。