simple background videos

by jorgeluis

HTML

<div class="banner" id="banner1">
	<video playsinline muted poster="	
https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x180.jpg">
		<source src="	
https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x180.webm" type="video/webm">
		<source src="	
https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x180.mp4" type="video/mp4">
	</video>
	<div class="banner-text">
		<h2><a href="#"><i>Call us live!</i> The Tea</a></h2>
		<p>Spilling every afternoon</p>
	</div>
</div>



<div class="banner" id="banner2">
	<video playsinline muted poster="	
https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x240.jpg">
		<source src="	
https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x240.webm" type="video/webm">
		<source src="	
https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x240.mp4" type="video/mp4">
	</video>
	<div class="banner-text">
		<h2><a href="#"><i>Call us live!</i> The Tea</a></h2>
		<p>Spilling every afternoon</p>
	</div>
</div>

CSS

.banner {
  position: relative;
  margin: 40px auto;
}
#banner1 {
  height: 180px;
  width: 400px;
}
#banner2 {
  height: 240px;
  width: 400px;
}
.banner-text {
  position: relative;
  padding: 20px;
  color: white;
  font-family: sans-serif;
}
#banner2 .banner-text {
  text-align: right;
}
h2 {
  font-size: 48px;
  margin: 0;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
h2 i {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -1px;
}
a, a:visited {
  display: block;
  position: relative;
  text-decoration: none;
  color: white;
}
.banner video { 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border-top: solid 10px #b71e51;
  border-bottom: solid 10px #b71e51;
}
#banner1 video {
  background: url(https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x180.jpg) no-repeat;
}
#banner2 video {
  background: url(https://s3.amazonaws.com/wpv-thetea/tea-banner-vid-161219-400x240.jpg) no-repeat;
}

JavaScript

var videos = document.querySelectorAll('video');
var video_to = setTimeout(function() {
  videos.forEach( function(vid) {
    if(vid.paused) {
      vid.play();
    } else {
      vid.pause();
    }
  });
}, 3000);