HTML5 视频的回退图像

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

我正在尝试为此视频横幅设置回退图像。当网站点击媒体查询（移动）时，我希望视频成为图像，但是当我刷新页面时，我注意到我的一个类在视频加载之前给出了深灰色背景。我想可能会出现相同的图像。我想相信会设置背景图像，当查询被击中时，也许我会在视频中添加类似 display：none 的东西。

不确定我是否正确执行此操作，但这里有一个小提琴 https://jsfiddle.net/8ucrarm0/

以防万一这很糟糕，这里是html/css：

.HTML -->

                    <div class="banner-text">
                        <span class="logo-white"><img src="img/logo-white.svg" alt=""></span>
                        <h1>Feeling luxurious is only one car wash away.</h1>
                        <h4>Become a Diamond Club Member today.</h4>    
                        <button class="btn btn-primary btn-lg">See Pricing</button>
                    </div>
                </div><!-- end video-holder -->
            </header>
    </div><!--end banner-->

.CSS：

#banner.container-fluid {
    padding: 0;
    position: relative;
}
#banner.overlay:after {
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(0,0,0,0.8);
}
header {
    position: relative;
    overflow: hidden;
    width:100vw;
    height:100vh;
    max-height:100vh;
    text-align:center;
}
.banner-text {
    position: relative;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    margin: 0 auto;
    max-width: 550px;
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
}
.banner-text h1,
.banner-text h4 {
    color: #fff;
}
.banner-text h1 {
    padding-bottom: 20px;
}
.banner-text h4 {
    padding-bottom: 40px;
}
.banner-text .logo-white {
    width: 75px;
    height: 65px;
    display: block;
    margin: 0 auto 20px auto;
}
.video-holder {
    position:absolute;
    height:100%;
    width:200%;
    left:-50%;
}
video {
    position:absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    min-height:100%;
    min-width:50%;
}