multiple videos with for loop

by Pranab Dey

HTML

<div class="main">
<video src="http://thenewcode.com/assets/videos/polina.mp4" autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg"></video>
<video src="http://thenewcode.com/assets/videos/polina.mp4" autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg"></video>
<video src="http://thenewcode.com/assets/videos/polina.mp4" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg"></video>
<div id="play"></div>
</div>

CSS

body{
  margin: 0;
}
.main{
  overflow: hidden; position: relative;
}
video{
  width: 100%;
  transition: 0.3s linear;
}
#play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: 0.3s linear; color: #fff;
}
.fade{
  filter: brightness(0.5);
  transition: 0.3s linear;
}

JavaScript

var play = document.getElementById("play");
var vid = document.querySelectorAll("video");

for(var i=0;i<vid.length;i++){
function playNow(){
(vid[i].paused) ? (vid[i].play(), play.innerHTML = "", vid[i].classList.remove("fade")) : (vid[i].pause(), play.innerHTML = "Video Paused", vid[i].classList.add("fade"))
}
function playHard(e){
if(e.keyCode === 13){
(vid[i].paused) ? (vid[i].play(), play.innerHTML = "", vid[i].classList.remove("fade")) : (vid[i].pause(), play.innerHTML = "Video Paused", vid[i].classList.add("fade"))
}
}

vid[i].addEventListener("click",playNow);
document.addEventListener("keydown", playHard);

vid[i].addEventListener("ended",again);
function again(){
play.innerHTML = "Replay";
vid.classList.add("fade");
}
}