Fallback image for HTML5 video

http://stackoverflow.com/questions/36783745/fallback-image-for-html5-video/36787504#36787504

HTML

<div class="container-fluid overlay full-img" id="banner">
			<header>
			    <div class="video-holder ">
			        <video autoplay loop muted>
			        <!-- <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"> -->
			        <source src="http://darrenbachan.com/playground/diamond-hand-car-wash/img/wash.mp4" type="video/mp4">
			        </video>

			        <div class="banner-text">
			        	<span class="logo-white"><img src="http://darrenbachan.com/playground/diamond-hand-car-wash/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%;
}
.btn {
	font-family: "montserratbold", Helvetica, Arial, sans-serif;	
	font-size: 14px;
	line-height: 24px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 80px;
	-moz-webkit-border-radius: 80px;
	-ms-webkit-border-radius: 80px;
	-o-webkit-border-radius: 80px;
	webkit-border-radius: 80px;
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.btn-md {
	padding: 10px 30px;
}
.btn-lg {
	padding: 12px 40px;
}
.btn-primary {
	background: #f2354b;
	border: 2px solid #f2354b;
}
.btn-secondary {
	background: #252525;
	border: 2px solid #252525;
}
.btn:hover {
	color: #fff;
}
.btn.btn-primary:hover {
	color: #f2354b;
	background: transparent;
	border: 2px solid #f2354b;
}

@media screen and (max-width: 768px){
  video{
   ...