html,
body {
	width: 100%;
	height: 100vh;
	margin: 0;
	display: flex;
}

#cargador {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	display: flex;
	z-index: 9999;
}

#cargador div {
	margin: auto;
	width: 100px;
	height: 100px;
	position: relative;
}

#cargador div::before,
#cargador div::after {
	content: "";
	box-sizing: border-box;
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}

#cargador div::before {
	border: solid 10px #aaa;
}
#cargador div::after {
	border: solid 10px transparent;
	border-top: solid 10px #00aeef;
	animation: vuelta 1s infinite linear;
}

.cargador.listo {
	visibility: hidden;
	opacity: 0;
}

@keyframes vuelta{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

video {
	width: 70%;
	box-sizing: border-box;
	margin: auto;
}