Necesito que apenas comience el video se muestre el contenido de el contenedor y cuando este a punto de acabar se oculte, el video dura 10 segundos, en la imagen esta el contenedor:
*{
margin:0px;
padding:0px;
}
.container-main {
position: relative
}
.container-main video {
width: 100%;
display: block;
min-height: 100px;
}
.container-main .img {
position: absolute;
top: 20%;
max-width: 300px
}
.img-1 {
right: 10%;
}
.medellin{
position: absolute;
right: 16%;
top:12%;
color: white;
font-family: Arial;
font-size: 40px;
}
.grado{
position: absolute;
right: 16%;
top:57%;
color: white;
font-family: Arial;
font-size: 70px;
}
.dia{
position: absolute;
right: 9%;
top:73%;
color: white;
font-family: Arial;
}
.hora{
position: absolute;
right: 16%;
top:85%;
color: white;
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>pieza clima</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<div class="container-main">
<video autoplay muted loop id="myVideo">
<source src="img/video1.mp4" type="video/mp4">
</video>
<img src="iconos/Soleado.png" class="img img-1" />
<h1 class="medellin">Medellín</h1>
<h1 class="grado">17ºC</h1>
<h1 class="dia">Martes, 19 de febrero</h1>
<h1 class="hora">4:30 p.m.</h1>
</div>
</body>