body{
  width: 100%;
  height: 100%;
  background-image: url(fondo1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.contener{
display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.vid{
  width: 400px;
  height: 600px;
   border: 1px whitesmoke solid;
  border-radius: 25px;
}


video{
 
  width: 400px;
  height: 600px;
 border-radius: 25px;
object-fit: cover;
box-shadow: 0px 0px 10px 10px violet;

transition:  transform 0.3s ease;
  

}
.botonReproducir{
  position:absolute;
z-index: 1;
  width: 100px;
  height: 30px;
  background-color: transparent;
  color: #fff;
  border: 2px  white solid;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 570px;
  margin-left: -397px;
  box-shadow: 0px 0px 50px violet;
}

.botonPausar{
position:absolute;
z-index: 1;
  width: 100px;
  height: 30px;
  background-color: transparent;
  color: white;
  border: 2px #fff solid;
  border-radius: 30px;
  cursor: pointer;
  margin-top: -36px;
  margin-left: 130px;
  box-shadow: 0px 0px 50px violet;
 

}
#botonReproducir, #botonPausar{
  background-color: aqua;
  cursor: pointer;
}