test video over video

by jonahe

HTML

<video autoplay loop controls="" src="https://www.w3schools.com/html/mov_bbb.mp4">
  
</video>

<video autoplay loop controls="" src="https://www.w3schools.com/html/mov_bbb.mp4">
  
</video>

<video autoplay loop controls="" src="https://www.w3schools.com/html/mov_bbb.mp4">
  
</video>

CSS

body {
  background: teal;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  border: 15px solid red;
  animation-name: fadeInOut;
  animation-duration: 6s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  opacity: 0;
}

video:nth-child(1) {
  
}

video:nth-child(2) {
  border-color: green;
  animation-delay: 2s;
}

video:nth-child(3) {
  border-color: yellow;
  animation-delay: 4s;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    top: 0;
  }
  25% {
    opacity: 1;
    top: 300px;
    left: 400px;
  }
  
  75% {
    opacity: 1;
  }
  
  90% {
    top: 0;
    opacity: 0;
  }
}